display:flex属性

什么是display:flex？（我来自逆战班）
Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。

1：先来了解一下display:flex

正常情况下


在一个盒子中，放置4个div，设置高度，宽度继承父元素，呈现如图排列方式，当我们给盒子加上display:flex时，再看一下


盒子内的4个div就变成了如图排列方式。

2：设置在容器上的属性flex-direction

flex-direction：决定主轴的排列方向
默认值：row，主轴水平方向，起点在左端，如上图所示
row-reverse：主轴水平方向，起点在有右端

column：主轴垂直方向，起点在上边沿

column-reverse：主轴垂直方向，起点在下边沿

3：设置在容器上的属性flex-wrap

默认情况下，子元素都排列在一条轴线上，但有可能一条轴线排不下

norwrap：默认值，不换行，如上图
wrap：换行处理

wrap-reverse：反向换行

4：设置在容器上的属性flex-flow

flex-flow是flex-direction和flex-wrap的复合写法

5：设置在容器上的属性justify-content

justify-content：定义了主轴方向上子项的对齐方式
flex-start：默认值，左对齐

flex-end：右对齐

flex-center：居中

space-between：两端对齐，子项之间间隔相等

space-around：每个子项两侧的间隔相等，即子项之间的间隔比子项与边框的间隔大一倍。

space-evenly：每个子项之间间隔相等，且等于子项与边框的间隔

6：设置在容器上的属性align-items

align-items：每一行中的子元素上下对齐放式
flex-start：起点对齐

center：中点对齐

flex-end：终点对齐

7：设置在容器上的属性align-content

align-content：定义多根轴线的对齐方式，如果只有一根轴线，该属性不起作用，最少需要两行才能看出效果，取值同justify-content
flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

flex-center：与交叉轴的中点对齐

space-between：与交叉轴的两端对齐，轴线之间间隔平均分布

space-around :每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍

space-evenly :每根轴线之间的间隔相等，且等于轴线与边框的间隔

8：设置在子容器上的属性order

order：用来对子容器进行排序，数值越小，排列越靠前，默认为0，可以是负值

9：设置在子容器上的属性flex-grow

flex-grow：扩展剩余的空间
默认值是0，也就是不去扩展，取值为1的时候，会把剩余空间全部占满

对子容器3设置flex-grow:1，子容器3将把剩余空间占满。子容器会按照设置的比例来分配空隙，如果比例总值小于1，那么会有空隙，如果比例总值大于1，将没有空隙

10：设置在子容器上的属性flex-shrink

flex-shrink：对子容器进行收缩
默认值为1，即空间不足将等比例缩小，0表示不收缩，如果有一个子容器的值为0，其它子容器为1，当空间不足时，该项目不缩小。负值对该属性无效，并且，容器不应该设置flex-wrap

11：设置在子容器上的属性flex-basis

flex-basis：定义在分配多余空间之前，子容器占据的主轴空间，取具体的数值，如果空间不足，则默认情况下该子容器也会缩小，空间充足，则不会

12：设置在子容器上的属性flex

flex：是flex-grow，flex-shrink，flex-basis的复合写法
可以用flex:auto;代替flex:1 1 auto；
可以用flex:none;代替flex:0 0 auto；

13：设置在子容器上的属性align-self

align-self：只针对一个子容器，允许该子容器与其它子容器有不一样的对齐方式，取值同align-items

总结

当我们给一个容器设置了display:flex的时候，在宽高不写的情况下

1. 主轴为水平轴（flex-direction:row），宽度由内容决定，高度由父容器决定
   
2. 主轴为垂直轴（flex-direction:column），宽度由父容器决定，高度由内容决定