flex布局学习笔记（阮⼀峰flex布局教程）
  前端笔试⾯试经常会问到：不定宽⾼如何⽔平垂直居中。最简单的实现⽅法就是flex布局，⽗元素加上如下代码即
可： display: flex; justify-content: center; align-items :center; 。下⾯详细介绍下flex布局吧。
  2009年，W3C提出了 Flex布局，可以简便⼂完整⼂响应式地实现各种页⾯布局。⽬前已得到了所有浏览器的⽀持，这意味着，现在就能很安全地使⽤这项功能。Flex布局将成为未来布局的⾸选⽅案。
Flex 是 Flexible Box 的缩写，意为“弹性布局”，⽤来为盒装模型提⾼最⼤的灵活性。任何⼀个容器都可以指定为 Flex 布局，需要设置 display: flex; 即可；⾏内元素也可以使⽤ Flex布局， display: inline-flex; ；webkit内核的浏览器，要加上 -webkit-前缀。
flex容器（⽗元素）有6个属性：flex-direction；flex-wrap；flex-flow；justify-content；align-items；align-content；
  flex-direction属性决定主轴的⽅向（即项⽬的排列⽅向）。有4个值：
    row（默认值）：主轴为⽔平⽅向，起点在左端。
    row-reverse：主轴为⽔平⽅向，起点在右端。
    column：主轴为垂直⽅向，起点在上沿。
    column-reverse：主轴为垂直⽅向，起点在下沿。
  flex-wrap，默认情况下项⽬都排在⼀条（轴）线。flex-wrap属性定义，如果⼀条轴线排不下，如何换⾏。有三个值：  　
    nowrap（默认）：不换⾏。
    wrap：换⾏，第⼀⾏在上⽅。
    wrap-reverse：第⼀⾏在下⽅。
  flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  justify-content属性定义了项⽬在主轴上的对齐⽅式。它有5个值可取：
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center：居中
    space-between：两端对齐，项⽬之间的间隔都相等
    space-around：每个项⽬两侧的间隔相等，所以项⽬之间的间隔⽐项⽬与边框的间距⼤⼀倍。
  align-items属性定义项⽬在交叉轴上如何对齐。它有5个值：
    flex-start：交叉轴的起点对齐
    flex-end：交叉轴的终点对齐
    center：交叉轴的中点对齐
    baseline：项⽬的第⼀⾏⽂字的基线对齐
    stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度。
  align-content属性定义了多根轴线的对齐⽅式，如果项⽬只有⼀根轴线，该属性不起作⽤。可取6个值
    flex-start：与交叉轴的起点对齐
    flex-end：与交叉轴的终点对齐
    center：与交叉轴的中点对齐
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
    space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍
    stretch（默认值）：轴线占满整个交叉轴
flex项⽬（⼦元素）有6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
  order属性定义项⽬的排列顺序。数值越⼩，排列越靠前，默认为0。
  flex-grow属性定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤。如果所有项⽬的flex-grow属性为1，则它们将等分剩余空间（如果有的话）。如果⼀个项⽬的flex-grow属性为2，其它项⽬都为1，则前者占据的剩余空间将⽐其他项⽬多⼀倍。
  flex-shrink属性定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。如果所有项⽬的flex-shrink属性都为1，当空间不⾜时，都将等⽐例缩⼩。如果⼀个项⽬的flex-shrink属性为0，其他项⽬都为1，则空间不⾜时，前者不缩⼩。负值对该属性⽆效。
  flex-basis属性定义了在分配多余空间之前，项⽬占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项⽬的本来⼤⼩。它可以设为跟width或height属性⼀样的值（例如200px），则项⽬将占据固定空间。
  flex属性是flex-grow，flex-shrink 和flex-basis的简写，默认值为 0 1 auto。后两个属性可选。该属性有两个快捷
flex布局对齐方式值，auto（1 1 auto）和 none（0 0 auto）。建议优先使⽤这个属性，⽽不是单独写三个分离的属性，因为浏览器会推算相关值。
  align-self属性允许单个项⽬有与其他项⽬不⼀样的对齐⽅式，可覆盖align-items属性，默认值为auto，表⽰继承⽗元素的align-items属性，如果没有⽗元素，则等同于stretch。该属性可取6个值，除了auto，其他都与align-items属性完全⼀致。即auto | flex-start | flex-end | center | baseline | stretch。
  具体实例见

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。