1.flex-direction属性,取值
row(默认值):主轴为水平方向,起点在左端
Row-reverse:主轴为水平方向,起点为右端。
Column:主轴为垂直方向,起点在上沿。
Column-reverse:主轴为垂直方向,起点在下沿。
2.flex-wrap属性,取值
nowrap:默认不换行。
Wrap:换行第一行在上方。
Wrap-reverse:换行第一行在下方。
3.flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
4.justify-content属性,取值
flex-start:左对齐。
Flex-end:右对齐。
Center:居中。
Space-between:两端对齐,项目之间的间隔都相等。
Space-around:每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框的间隔大一倍。
5.aligan-items属性,取值
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认):如果项目未设置高度或auto,将占满整个容器的高度。
6.align-content
取值:flex-start/flex-end/center/space-between/space-around/space-evenly /stretch(默认)
7.order
取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前
8.flex-grow
取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。
9.flex-shrink
取值:默认1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。
10.flex-basis
取值:默认auto,用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会width属性高,因此会覆盖width属性。