flex-direction:设置主轴方向,确定子元素的排列方式
flex-wrap:当弹性子元素超出弹性容器是是否换行
flex-flow:flex-direction和flex-wrap复合属性
justify-content:主轴上对齐方式
align-items:侧轴上的对齐方式
align-content:侧轴上有空白时,侧轴的对齐方式
语法:flex-direction:row | row-reverse | column | column-reverse
row(默认值):主轴为水平方向,排列顺序与页面文档的顺序相同。
row-reverse:主轴为水平方向,排列顺序与页面文档的顺序相反。
column:主轴为垂直方向,排列顺序与从上到下
column-reverse:主轴为垂直方向,排列顺序从下到上
语法:flex-wrap:nowrap | wrap | wrap-reverse
nowrap:溢出不换行
wrap:溢出时自动换行
wrap-reverse:溢出时自动换行,翻转排列
语法:justify-content:flex-start | flex-end | center | space-between | space-around
flex-start:主轴开始对齐,主轴为横轴,ltr环境下,左对齐
flex-end:主轴结束对齐,主轴为横轴,ltr环境下,右对齐
center:居中对齐
space-between:第一个和最后一个对齐容器边缘,其余均匀分布。
space-around:全部均匀分布