flex-direction

1、flex-direction:row; /*默认值。项目将水平显示正如一行一样*/
1
2
3
2、 flex-direction:row-reverse; /*与 row 相同,但是以相反的顺序*/
1
2
3
3、flex-direction:column; /*项目将垂直显示,正如一列一样*/
1
2
3
4、flex-direction:column-reverse; /*与 column 相同,但是以相反的顺序*/
1
2
3

flex-wrap

5、flex-wrap:nowrap; /*flex容器为单行。该情况下flex子项可能会溢出容器*/
1
2
3
6、flex-wrap:wrap; /*flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行*/
1
2
3
7、flex-wrap:wrap-reverse; /*反转 wrap 排列*/
1
2
3

flex-flow

8、flex-flow:column ; /*水平方向的排列、垂直方向的排列*/
1
2
3
9、flex-flow: wrap-reverse; /*水平方向的排列、垂直方向的排列*/
1
2
3

align-content

10、align-content:stretch; /*默认值。项目被拉伸以适应容器*/
1
2
3
11、align-content:center; /*项目位于容器的中心*/
1
2
3
12、align-content:flex-start; /*项目位于容器的开头*/
1
2
3
13、align-content:flex-end; /*项目位于容器的结尾*/
1
2
3
14、align-content:space-between; /*项目位于各行之间留有空白的容器内*/
1
2
3
15、align-content:space-around; /*项目位于各行之前、之间、之后都留有空白的容器内*/
1
2
3

align-items

16、align-items:stretch; /*默认值。元素被拉伸以适应容器*/
1
2
3
17、align-items:baseline; /*元素位于容器的基线上*/
1
2
3
18、align-items:center; /*元素位于容器的中心*/
1
2
3
19、align-items:flex-start; /*元素位于容器的开头*/
1
2
3
20、align-items:flex-end; /*元素位于容器的结尾*/
1
2
3

justify-content

justify-content:center; /*项目位于容器的中心*/
1
2
3
justify-content:flex-start; /*默认值。项目位于容器的开头*/
1
2
3
justify-content:flex-end; /*项目位于容器的结尾*/
1
2
3
justify-content:space-between; /*项目位于各行之间留有空白的容器内*/
1
2
3
justify-content:space-around; /*项目位于各行之前、之间、之后都留有空白的容器内*/
1
2
3