flex-direction
1、flex-direction:row; /*默认值。项目将水平显示正如一行一样*/
2、 flex-direction:row-reverse; /*与 row 相同,但是以相反的顺序*/
3、flex-direction:column; /*项目将垂直显示,正如一列一样*/
4、flex-direction:column-reverse; /*与 column 相同,但是以相反的顺序*/
flex-wrap
5、flex-wrap:nowrap; /*flex容器为单行。该情况下flex子项可能会溢出容器*/
6、flex-wrap:wrap; /*flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行*/
7、flex-wrap:wrap-reverse; /*反转 wrap 排列*/
flex-flow
8、flex-flow:column ; /*水平方向的排列、垂直方向的排列*/
9、flex-flow: wrap-reverse; /*水平方向的排列、垂直方向的排列*/
align-content
10、align-content:stretch; /*默认值。项目被拉伸以适应容器*/
11、align-content:center; /*项目位于容器的中心*/
12、align-content:flex-start; /*项目位于容器的开头*/
13、align-content:flex-end; /*项目位于容器的结尾*/
14、align-content:space-between; /*项目位于各行之间留有空白的容器内*/
15、align-content:space-around; /*项目位于各行之前、之间、之后都留有空白的容器内*/
align-items
16、align-items:stretch; /*默认值。元素被拉伸以适应容器*/
17、align-items:baseline; /*元素位于容器的基线上*/
18、align-items:center; /*元素位于容器的中心*/
19、align-items:flex-start; /*元素位于容器的开头*/
20、align-items:flex-end; /*元素位于容器的结尾*/
justify-content
justify-content:center; /*项目位于容器的中心*/
justify-content:flex-start; /*默认值。项目位于容器的开头*/
justify-content:flex-end; /*项目位于容器的结尾*/
justify-content:space-between; /*项目位于各行之间留有空白的容器内*/
justify-content:space-around; /*项目位于各行之前、之间、之后都留有空白的容器内*/