CSS: Flex 布局

弹性布局为盒模型提供了很多常见场景的解决方案，比如居中，左右排列。
理解弹性布局，首先要明确弹性布局中重要的两根坐标轴：主轴和交叉轴，默认是水平排列，因此默认的主轴是水平轴，交叉轴式垂直轴。每个轴都有它的起点和终点，每一项都要在主轴上和交叉轴上分别占据空间。
Flex布局的属性分为容器属性和项目属性。

容器属性

flex-direction

主轴上的项目排列方向，默认值row

1. flex-direction: row
   
2. flex-direction: column
   
3. flex-direction: row-reverse
   
4. flex-direction: column-reverse
   

flex-wrap

默认情况下，所有的项目都会水平或者默认排列在主轴上，如果排列不下，默认滚动，flex-wrap定义了在主轴排列不下时，项目如何排列， 默认nowrap

1. flex-wrap: wrap
   换行，第一行在上方
   
2. flex-wrap: nowrap
   不换行
   
3. flex-wrap: wrap-reverse
   换行，第一行在下方
   

flex-flow

flex-flow是flex-direction+flex-wrap, flex-flow: <flex-direction> || <flex-wrap>;

justify-content

定义了项目整体在主轴上的对齐方式，默认值为flex-start

1. justify-content: center
   
2. justify-content: flex-start
   
3. justify-content: flex-end
   
4. justify-content: space-around
   
5. justify-content: space-between
   
6. justify-content: space-evenly
   

align-items

定义每一行在交叉轴上的对齐方式，默认值为stretch

1. align-items: stretch
   

   

2. align-items: flex-start
   

   

3. align-items: flex-end
   

   

4. align-items: center
   

   

5. `align-items: baseline
   每一行项目的第一行文字的基线对齐·

   
   

align-content

定义项目整体在交叉轴上的对齐方式，默认值为flex-start

1. align-content: flex-start
   

   

2. align-content: flex-end
   

   

3. align-content: center
   

   

4. align-content: stretch
   

   

5. align-content: space-around
   

   

6. align-content: space-between
   

   

7. align-content: space-evenly
   

   

项目属性

order

数值越小，排列越靠前，默认值为0，假设将第五个元素order设为1，其在整体的项目（非单行）排列中变成最后一个。

flex-grow

当存在剩余空间时，项目的放大比例，默认为0，即即使存在剩余空间，也不放大。如果将第一个元素的flex-grow设为0.1，意味着假设存在剩余空间，它在主轴上的尺寸将设置为1.1倍和剩余空间的最小值。如果所有项目的flex-grow一致，将平等分配剩余空间，若其余项目均为1，某一个是2，那么他分配的剩余空间将是其余的两倍（不会优先保证自身尺寸的两倍）

flex-shrink

定义了空间不足时，项目的缩小比例，默认值为1
当空间充足时，可以看出，每个项目的宽度大致为200px。

当空间严重不足时，可以看出，每个项目的最小宽度为100px。

因此flex-shrink默认值1意味着，当空间不足时，最多压缩一倍的尺寸。当所有的项目flex-shrink值相同时且大于0，空间不足，大家等比例缩小；如果所有的项目flex-shrink都为0，空间不足时，大家都不缩小；如果只有一个为0，其他都大于零，那么只有为0的不缩小；小于零无效。

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

1. flex-start
   

   

2. flex-end