Flex 弹性盒模型（父容器）

display：flex（转变为弹性盒模型）

 

flex-direction：

　　  flex-direction 用来控制子项整体布局方向，是从左往右还是从右往左，

　　是从上往下还是从下往上

　　取值：

　　row：默认值，显示为行，方向为当前文档水平流方向，默认情况下是从左往右

　　row-reverse：显示为行，但是方向和 row 属性值是相反的

　　column：显示为列

　　column-reverse：显示位列，但是方向和 column 属性值相反

flex-wrap：

　　  flex-wrap 用来控制子项整体单行显示还是换行显示

　　取值：

　　nowrap：默认值，表示单行显示，不换行

　　wrap：宽度不足换行显示

　　wrap-reverse：宽度不足换行显示，但是从下往上开始，也就是原本换行在下面的子项现在跑到上面（反向）

flex-flow：

　　  flex-flow 属性是 flex-direction 和flex-wrap 的缩写，表示 flex 布局的 dlow 流动特性。

　　第一个值表示方向，第二个值表示换行，中间用空格隔开。（也可以说是以上两种的复合写法）

justify-content：

　　  justify-content 属性决定了主轴方向上子项的对齐和分布方式（flex-direction 的方向就是主轴方向）。

　　取值：

　　flex-start：默认值，表现为起始对齐。

　　flex-end：表现为结束位置对齐

　　center：表现为居中对齐

　　space-between：表现为两端对齐。between 是中间的意思，意思是多余的空白间距只在元素中间区域分配。

　　space-around：around 是环绕的意思，意思是每个 flex 子项两侧都环绕互不干扰的等宽的空白间距，最终

　　　　　　视觉上边缘两侧的空白只有中间空白宽度的一半。

　　space-evenly：evenly 是匀称、平等的意思。也就是视觉上，每个 flex 子项两侧空白间距完全相等。

align-items：（围绕子项对齐方式）

　　  align-items 中的 items 指的就是 flex 子项们，因此 algin-items 指的就是 flex 子项们相对于

　　flex 容器在侧轴方向上的对齐方式。

　　取值：

　　stretch：默认值，flex子项拉伸。（不写宽高会全部100%，换行会分为两行）

　　flex-start：表现为容器顶部对齐。（以顶部对齐）

　　flex-end：表现为容器底部对齐。（以底部对齐）

　　center：表现为垂直居中对齐。（垂直居中对齐，换行的话会换完行再居中）

align-content：（items 表示子项的对齐方式，content 表示多行的对齐方式）

　　  align-content 可以看成 justify-content 是相似且对立的属性，如果所有 flex 子项只有一行，则

　　align-content 属性是没有任何效果的

　　取值：

　　stretch：默认值，每一行 flex 子元素都等比例拉伸。例如，如果共两行 flex 子元素，则每一行拉伸高度是50%。

　　flex-start：表现为起始位置对齐

　　flex-end：表现为结束位置对齐

　　center：表现为居中对齐

　　space-between：表现为两端对齐

　　space-around：每一行元素上下都享有独立不重叠的空白空间

　　space-evenly：每一行元素都完全上下等分。