flex-direction:决定主轴排列方向
参数:row(默认):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上端。
column-reverse:主轴为垂直方向,起点在下端。
flex-wrap:如果总宽度超过屏幕宽度,决定是否换行
参数:nowrap(默认):不换行,所有item在一行。
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
flex-flow:flex-direction和flex-wrap的缩写
例:flex-flow:row wrap;
justify-content�:决定主轴方向的对齐方式
参数:flex-start(默认):对齐主轴的起点
flex-end:对齐主轴的终点
center:在主轴方向居中
space-between:左右不留空 平分位置
space-around: 左右留空 平分位置
stretch(默认值):轴线占满整个交叉轴。
align-items:决定交叉轴的对齐方式
参数:flex-start(默认):对齐交叉轴的起点
flex-end:对齐交叉轴的终点
center:在交叉轴方向居中
baseline:以项目之间的第一行文字的基线对齐。
stretch(默认):如果项目未设置高度或设为auto,将占满整个容器的高度。
注:align-items和align-content的区别:前者适用于单行容器,而后者只适用于多行
flex:给子元素设置,子元素将按照这个属性数字的比例分配空间。
参数:数字:项目占据父元素的空间比例,填满容器。
auto:如果超过父元素尺寸,项目尺寸会等比例缩小,如果不足父元素的尺寸,会等比例放大以填满容器。
none:项目尺寸不变化。