display:flex属性

display:flex属性

1.flex-direction: row; 布局的排列方向 （主轴排列方向）
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse： 显示为行。但方向和row属性值是反的
column： 显示为列
column-reverse： 显示为列。但方向和column属性值是反的

2.flex-wrap : nowrap; 是否进行换行处理。
nowrap： 默认值，不换行处理
wrap： 换行处理
wrap-reverse：反向换行

3.flex-flow :flex-direction flex-wrap 复合写法 (是有顺序的)。
4.justify-content：属性决定了主轴方向上子项的对齐和分布方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。

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

space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。

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

5.align-items : 每一行中的子元素上下对齐方式。

stretch; 默认值，flex子项拉伸

flex-start;表现为容器顶部对齐

center;表现为容器底部对齐

flex-end;表现为垂直居中对齐

6.align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
值跟justify-content取值是相同的。