前言

　　flexible box即为可伸缩的盒模型，让容器能让其子元素自由改变宽高或顺序，以最佳的方式填充容器。可以让子元素扩展来填满可用空间，缩小来防止溢出。flexible box由伸缩容器和伸缩项目组成。

　　兼容性：IE10+、firefox、chrome、safari

基本术语

　　下面是一张伸缩盒模型的概念图：

　

　　1、flex container：伸缩容器

　　2、flex item：伸缩项目

　　3、main-axis：主轴

　　4、main-start：主轴起点

　　5、main-end：主轴终点

　　6、main-size：主轴尺寸

　　7、cross-axis：侧轴

　　8、cross-start：侧轴起点

　　9、cross-end：侧轴终点

　　10、cross-size：侧轴尺寸

相关属性介绍

1、display:flex | inline-flex：定义伸缩容器

　　　取值：

　　　　1、flex：将元素定义为弹性盒模型

　　　　2、inline-flex：将元素定义为内联块级弹性盒模型

2、flex-direction：适用于伸缩容器，定义伸缩项目排列在伸缩容器上的方向

　　　取值：

　　　　1、row：默认值，当文字排版时ltr时从左向右，当文字排版时rtl时从右向左

　　　　2、row-reverse：方向与row相反

　　　　3、column：从上向下

　　　　4、column-reverse：从下往上

1  2  3  4   
          5    6   25 26 27   
         
          28     
          
           1
          
29     
          
           2
          
30     
          
           3
          
31     
          
           4
          
32     
          
           5
          
33   
         
34 35 

3、flex-wrap：适用于伸缩容器，定义伸缩容器是单行还是多行。

　　　取值：

　　　　1、nowrap：默认，单行

　　　　2、wrap：多行，新增相沿着侧轴方向添加

　　　　3、wrap-reverse：多行，侧轴起点与终点方向交换

1  2  3  4   
          5    6   25 26 27   
         
          28     
          
           1
          
29     
          
           2
          
30     
          
           3
          
31     
          
           4
          
32     
          
           5
          
33     
          
           6
          
34     
          
           7
          
35     
          
           8
          
36     
          
           9
          
37   
         
38 39 

4、justif-content：适用于伸缩容器，定义伸缩项目沿着主轴的对齐方式

　　　取值：

　　　　1、flex-start：默认值，伸缩项目向一行的起始位置靠齐

　　　　2、flex-end：伸缩项目向一行的结束位置靠齐

　　　　3、center：伸缩项目向一行的中间靠齐

　　　　4、space-between：第一个在开始位置，第二个在结束位置，中间的平均分配

　　　　5、space-around：两端一半空位，中间平均分配

1  2  3  4   
          5    6   28 29 30   
         
          31     
          
           1
          
32     
          
           2
          
33     
          
           3
          
34     
          
           4
          
35   
         
36 37 

5、align-items：适用于伸缩项目，定义在侧轴上的对齐方式

　　　取值：

　　　　1、flex-start：侧轴方向向起始位置靠齐

　　　　2、flex-end：侧轴方向向结束位置靠齐

　　　　3、center：侧轴方向居中靠齐

　　　　4、baseline：侧轴方向基线对齐

　　　　5、stretch：默认值，侧轴方向拉伸填充伸缩容器

1  2  3  4   
          5    6   28 29 30   
         
          31     
          
           1
           
1
          
32     
          
           2
          
33     
          
           3
          
34     
          
           4
          
35     
          
           5
          
36     
          
           6
          
37     
          
           7
          
38     
          
           8
          
39     
          
           9
          
40   
         
41 42 

6、align-content：适用于伸缩容器，指定多行伸缩容器的对齐

　　　取值：

　　　　1、flex-start：各行向伸缩容器的起点位置堆叠。

　　　　2、flex-end：各行向伸缩容器的结束位置堆叠。

　　　　3、center：各行向伸缩容器的中间位置堆叠。

　　　　4、space-between：首行靠开始，末行靠结尾， 中间平均分配间隔

　　　　5、space-around：首末一半，中间平均分配间隔

　　　　6、stretch：默认值，各行伸缩占满剩余空间

1  2  3  4   
          5    6   29 30 31   
         
          32     
          
           1
           
1
          
33     
          
           2
          
34     
          
           3
          
35     
          
           4
          
36     
          
           5
          
37     
          
           6
          
38     
          
           7
          
39     
          
           8
          
40     
          
           9
          
41   
         
42 43 

7、order：适用于伸缩项目，控制伸缩项目在伸缩容器中出现的顺序。

　　　取值：默认0，正整数和0。

1  2  3  4   
          5    6   21 22 23   
         
          24     
          
           1
           
1
          
25     
          
           2
          
26     
          
           3
          
27     
          
           4
          
28     
          
           5
          
29     
          
           6
          
30     
          
           7
          
31     
          
           8
          
32     
          
           9
          
33   
         
34 35 

8、flex-grow：适用于伸缩项目，定义伸缩项目的扩展能力，对剩余空间所占的比例分配。

　　　取值：默认0，正整数和0

1  2  3  4   
          5    6   21 22 23   
         
          24     
          
           1
           
1
          
25     
          
           2
          
26     
          
           3
          
27   
         
28 29 

9、flex-shrink：适用于伸缩项目，定义伸缩项目收缩的能力，伸缩项目超出伸缩容器后收缩的比例。

　　　取值：默认0，正整数和0

1  2  3  4   
          5    6   21 22 23   
         
          24     
          
           1
           
1
          
25     
          
           2
          
26     
          
           3
          
27   
         
28 29 

使用于伸缩项目的其他属性：

　　flex-basis、flex、align-self