上一篇 介绍了传统的布局解决方案，基于 盒模型，依靠 display 属性 + position 属性 + float 属性 + z-index 属性；而它对于特殊的布局结构不太友好，比如，垂直居中 就不易实现。

关于 Flex 布局

Flex(Flexible Box)，即弹性布局,Flexbox 的子元素之间提供了强大的空间分布和对齐能力，为各种布局结构提供了合理的解决方案。当容器设为Flex布局以后，子元素的float 、clear 和vertical-align 属性将失效。

基本概念

Flex 布局是一种一维的布局模型，能处理一个维度上的元素布局。

• FlexBox 中的两根轴
  当使用 Flex 布局时，容器中有两根轴线：主轴和与之垂直的轴。
• FlexBox 中的起始和终止线
  起始线终止线规定了两根轴线在布局中的方向。

FlexBox 容器属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

• flex-direction
  flex-direction定义了容器的两根轴的方向和起止方向，可取值有 row | row-reverse | column | column-reverse。

    flex-direction: row;                   /主轴为水平方向，起点在左端
    flex-direction: row-reverse;           /主轴为水平方向，起点在右端
    flex-direction: column;                /主轴为垂直方向，起点在上沿
    flex-direction: column-reverse;        /主轴为垂直方向，起点在下沿

• flex-wrap
  默认情况下，容器内的 item 都会根据主轴进行排列，即使超出了容器的边界也不会换行继续显示。flex-wrap 规定了元素是否换行，可取值有 nowrap | wrap | wrap-reverse。

    flex-wrap: nowrap;                      /不换行。
    flex-wrap: wrap;                        /换行
    flex-wrap: wrap-reverse;                /反向换行

• flex-flow
  flex-flow 是flex-direction属性和flex-wrap 属性的简写形式，默认值为row nowrap 。
• justify-content
  justify-content 属性定义了容器内元素在主轴上的对齐方式。常用的取值有 flex-start | flex-end | center | space-between | space-around。

   justify-content: flex-start              /默认值，起始线对齐
   justify-content: flex-end                /终止线对齐
   justify-content: center                  /主轴居中对齐
   justify-content: space-around            /主轴两端对齐，容器内元素之间的间距相同
   justify-content: space-between           /主轴方向上，容器内每个元素有相同的外边距

• align-items
  align-items 属性定义项目在交叉轴上如何对齐。常用的取值有 flex-start | flex-end | center | baseline | stretch。

   align-items: flex-start;                 /默认值,交叉轴起始线对齐
   align-items: flex-end;                   /交叉轴终止线对齐
   align-items: center;                     /交叉轴居中对齐
   align-items: baseline;                   /项目的第一行文字的基线对齐
   align-items: stretch;                    /如果项目未设置高度或设为auto，将占满整个容器的高度

• align-content
  align-content 属性定义了多根轴线的对齐方式。常用取值有 align-content: flex-start | flex-end | center | space-between | space-around | stretch。

    align-content: flex-start；              /交叉轴起始线对齐
    align-content: flex-end；                /交叉轴终止线对齐
    align-content: center；                  /交叉轴居中对齐
    align-content: space-between；           /交叉轴两端对齐，容器内元素之间的间距相同
    align-content: space-around；            /交叉轴方向上，容器内每个元素有相同的外边距
    align-content: stretch；                 /默认值，轴线占满整个交叉轴

item 元素属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

• order
  order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局，取值为整数，值越小顺序越靠前。
• flex-grow
  flex-grow 属性定义弹性容器内元素的拉伸因子，取值为非负整数，0 为不拉伸，值越大拉伸比例越大，按比例分配容器内剩余空间。
• flex-shrink
  flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。取值为非负整数，0 为不收缩，值越大收缩比例越大，按比例收缩充满弹性容器。
• flex-basis
  flex-basis属性指定了 flex 元素在主轴方向上的初始大小，默认为 auto。
• flex
  flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
• align-self
  align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items 属性。默认值为auto ，表示继承父元素的align-items 属性，如果没有父元素，则等同于 stretch。