常用属性

1 flex-direction 主轴方向

flex-direction: row; 默认值。水平显示
flex-direction: row-reverse; 与 row 相同，但是以相反的顺序
flex-direction: column; 垂直显示
flex-direction: column-reverse; 与 column 相同，但是以相反的顺序

flex-direction: initial; 设置该属性为它的默认值
flex-direction: inherit; 从父元素继承该属性

2 justify-content 主轴对齐方式（水平轴）

justify-content: flex-start ;      默认值。项目位于容器的开头。    
justify-content: flex-end  ;         项目位于容器的结尾。    
justify-content: center ;            项目位于容器的中心。    
justify-content: space-between ;    项目位于各行之间留有空白的容器内。
justify-content: space-around ; 项目位于各行之前、之间、之后都留有空白的容器内。    
justify-content: initial ;           设置该属性为它的默认值。 
justify-content: inherit ;           从父元素继承该属性。

3 align-content 侧轴对齐方式（水平轴）

align-content: stretch  ;         默认值。项目被拉伸以适应容器。    
align-content: center  ;          项目位于容器的中心。    
align-content: flex-start  ;      项目位于容器的开头。    
align-content: flex-end  ;        项目位于容器的结尾。    
align-content: space-between  ;   项目位于各行之间留有空白的容器内。    
align-content: space-around  ; 项目位于各行之前、之间、之后都留有空白的容器内。    
align-content: initial  ;            设置该属性为它的默认值。请参阅 initial。    
align-content: inherit  ;            从父元素继承该属性。请参阅 inherit。

4 align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

align-items: stretch ; 默认值。项目被拉伸以适应容器。    
align-items: center ;    项目位于容器的中心。    
align-items: flex-start ; 项目位于容器的开头。    
align-items: flex-end ;    项目位于容器的结尾。    
align-items: baseline ;    项目位于容器的基线上。    
align-items: initial ;    设置该属性为它的默认值。
align-items: inherit ;    从父元素继承该属性。