一Flexible Box Layout：

  弹性赫模型布局：提供一种更加高效的方式来对 容器中的条目进行布局、对齐和分配空间

二、盒模型的概念

1、容器：采用flex 布局的元素都称为容器 Flex Container

2、项目：容器内的所有子元素自动成为容器成员，称为项目  Flex Item

3、两根轴：

      3-1、main axis（主轴）：

              容器中水平的称为主轴

              main start主轴的开始位置

              main end主轴的结束位置

      3-2、cross axis（交叉轴）：

              容器中垂直的称为交叉轴。

              cross start交叉轴的开始位置。

              cross end交叉轴的结束位置。

4、项目默认按照主轴排列：

     4-1：main size单个项目占据的主轴空间

     4-2：cross size单个项目占据的交叉轴空间

三、使用

1、任何容器都可以指定为flex布局：

       1-1：.box { display: flex; }

       1-2：flex布局之后，子元素成为内联块元素

       1-3：注意：display: -webkit-flex;

2、行内元素也可以使用flex布局：.box section { display: inline-flex; }

3、注意设置后，float /clear / vertical-align将失效

四、容器的样式

/*给容器标签设置flex属性，则该容器中项目的布局就会按照flex的方式布局*/

/*如果父标签成了flex的容器，则子标签会有内联块样式的相关属性；且子标签所设置的float\clear\vertical-align属性会失效*/

1、   flex-direction：决定主轴的方向（项目的排列方向）

         /*通过修改主轴的方向，进而修改项目的布局顺序*/

        flex-derection: row | row-reverse | column | column-reverse;

         1-1值：    row（默认值）   主轴为水平方向（左到右）

                          row-recerse      主轴为水平方向（右到左）

                          column          主轴为垂直方向（上到下）

                         column-reverse        主轴为垂直方向（下到上）

2、 flex-wrap：默认情况下，项目都排在一条线（轴线），如果一条轴线排不下，flex-wrap决定该如何换行。

指定项目是否换行  flex-wrap: nowrap | wrap| wrap-reverse

       1-1值：   no-wrap（默认）不换行

                      wrap   换行，第一行在上方

                       wrap-reverse  换行，第一行在下方

3、 flex-flow: flex-flow属性是flex-direction属 性和flex-wrap的简写形式

        默认值如 flex-flow:wrap row

4、 justify-content：决定项目在主轴上的对齐方式（以下属性默认从左向右为例）

        justify-content: flex-start | flex-end | center |space-between | space-around;         

      1-1值：   flex-start：研左侧对齐

                      flex-end：沿右侧对齐

                      center：沿中间对齐

                      space-around：均匀分布（项目两侧留白相等）

                      space-between：项目靠两侧对齐

5、align-items：决定项目沿交叉的对齐方式（以默认从上到下为例）。

           align-items:flex-start | center | flex-end | stretch | baseline

        5-1值：  flex-start：沿上方对齐

                     center：沿中间对齐

                     flex-end：沿下方对齐

                     baseline：沿文字基线对齐

                    stretch：默认值 填满整个交叉轴，将占满整个容器的高度

6、  align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。

       align-content: flex-start | flex-end | center | space-between | space-around | stretch：默认值

        6-1值：flex-start：沿交叉轴起点对齐

                     flex-end：沿交叉轴结束点对齐

                     center：沿交叉轴中点对齐

                     space-between：沿交叉轴两侧对齐

                     space-around：沿交叉轴

                     stretch (默认值)轴线占满整个交叉轴

align-items和align-content的异同

相同点：都是设置项目在交叉轴方向上的对齐方式

不同点：

在只有单根轴线（项目不换行）时，使用align-items设置对齐方式

在有多跟轴线（项目换行）时，使用align-content把多跟交叉轴合并为一根，每一行上的项目都参照同一根交叉轴进行对齐。

如果在多跟轴线情况下使用align-items来设置交叉轴方向上的对齐方式，每一行的项目会参照自己这一行上的交叉轴进行对齐（效果：行与行之间有空隙）

五、项目的属性

1、 flex-grow：[number] 定义项目的放大比例

      number: 数值 默认为0 不放大，值越大，放大比率越大

      默认为0，即如果存在剩余空间，也不放大

       如果所有的flex-grow属性都为1，则他们将等分剩余空间如果一个项目的flex-grow属性为            2，其它项目都为1，则前者占据的剩余空间将⽐其它项多一倍

2、flex-shrink：[number]  定义了项目的缩小比例

       number： 数值 默认1 自动缩小，值越大，缩小比率越大

       默认为1即如果空间不足，该项目将缩小

       如果所有的项目flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的          flexshrink属性为0，则其它项目都为1，则空间不足时，前者不缩小。

        负值对该属性无效

3、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间

                flex-basis: auto | pixel | 百分比

              默认值为auto，即项目的本来大小

                auto ： 使用项目本身大小

                pixel ： 使用指定的像素值

                percent ： 使用指定的百分比

                                 100% 当wrap 时，项目会占容器的整个宽度

                                当nowrap 时， 项目会占容器主轴剩余的宽度（无他放大无效）

4、flex flex: flex-grow  | flex-shrink | flex-basis

       如：flex:1 1 100%

5、align-self：属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性

      flex-start | center | flex-end | stretch | baseline 决定项目自身的对齐方式（相对于交叉轴）

      默认值auto表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

     该属性有6个值，除了auto，其它都与align-items属性完全一致

6、 order：定义项目的排列顺序 数值越小，排列越靠前 默认为0

         order: [number] 决定项目的顺序