1.justify-content属性 （水平对齐元素）
1.flex-start：元素和容器的左端对齐。
2.flex-end：元素和容器的右端对齐。
3.center：元素在容器里居中。
4.space-between：元素之间保持相等距离。
5.space-around：元素周围保持相等距离。
2.align-items属性 （纵向对齐元素）
1.flex-start:元素与容器顶部对齐。
2.flex-end：元素与容器底部对齐。
3.center：元素纵向居中。
4.baseline：元素在容器的基线位置显示。
5.stretch：元素被拉伸以填满整个容器。
3.flex-direction属性 （定义了元素在容器里摆放的方向）
1.row：元素摆放在方向和文字一致 1-->2-->3
2.row-reverse:元素摆放在方向和文字相反 3<--2<--1
3.column：元素从上放到下。
4.column-reverse：元素从下放到上。
*注意：（1）当调转行，列方向时，“justify-content”中的值（flex-start，flex-end）对应的方向也被调转。
（2）当flex-direction以列为方向时，“justify-content”控制纵向对齐；“align-items”控制横向对齐。
4.order 属性 （...-1,0,1...） 类似数学坐标轴
设置指定元素class，默认order=0
.a{ order:1; }
5.flex-wrap属性 （分散元素）
1.nowrap：所有元素都在一行。
2.wrap：元素自动换成多行。
3.wrap-reverse：元素自动换成逆序多行。
* flex-direction与flex-wrap一起使用时，可以缩写属性：flex-flow
flex-flow：row wrap； //以空格分隔
6.align-content （行与行之间的分隔）
1.flex-start：多行都集中在顶部。
2.flex-end：多行都集中在底部。
3.center：多行居中。
4.space-between：行与行之间保持相等距离。
5.space-around：每行的周围保持相等距离。
6.stretch：每一行都被拉伸以填满容器。
*注意：align-content 决定行之间的间隔；align-items决定元素整体在容器什么位置
只有一行时，align-content不起作用。
7.align-self属性 （控制单个元素的属性）
与align-items的值一致
1.flex-start:元素与容器顶部对齐。
2.flex-end：元素与容器底部对齐。
3.center：元素纵向居中。
4.baseline：元素在容器的基线位置显示。
5.stretch：元素被拉伸以填满整个容器。
网友评论