flex

flex-direction：

确认主轴，row、column及其翻转

 

justify-content：

设置主轴上子元素的排列方式：

flex-start  左上 默认

flex-end  右上

center  居中

space-around  平分剩余空间

space-between  先两边贴边 再平分

 

flex-wrap：

设置子元素是否换行

nowrap：默认不换行

wrap：换行

 

align-items：

设置侧轴的子元素排列方式（单行）

flex-start  左上 默认

flex-end  右上

center  居中

stretch  拉伸 子元素不要给高度

 

align-content：

设置侧轴的子元素排列方式（单行）

flex-start  左上 默认

flex-end  尾部开始排列

center  居中

space-between 子项在侧轴先分布在两头、在平分剩余空间

space-around 子项在侧轴平分剩余空间

stretch 子项高度平分父元素高度

 

flex-flow:

设置主轴方向和是否换行的简写，设置了flex-direction和flex-wrap

 

flex 布局子项属性

flex：

定义子项目分配剩余空间，用flex来表示占多少空间，自适应

 

align-self：

控制子元素在侧轴上的排列方式，单独一个