1、flex-direction属性()
flex-direction:
row
|row-reverse
|column
|column-reverse
- row(默认值):主轴为水平方向,起点在左端
- row-reverse:主轴为水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿
- column-reverse:主轴为垂直方向,起点在下沿
2、flex-wrap属性(如果一条轴线排不下,如何换行)
flex-wrap:
nowrap
|wrap
|wrap-reverse
nowrap
(默认):不换行wrap
:换行,第一行在上方wrap-reverse
:换行,第一行在下方
3、flex-flow属性(上述两个组合)
flex-flow:
flex-direction
,flex-wrap
flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
4、justify-content属性(在主轴上的对齐方式)横向
justify-content:
flex-start
|flex-end
|center
|space-between
|space-around
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等space-around
:每个项目两侧的间隔相等
5、align-items属性(在交叉轴上如何对齐)纵向
align-items:
flex-start
|flex-end
|center
|baseline
|stretch
flex-start
:交叉轴的起点对齐flex-end
:交叉轴的终点对齐center
:交叉轴的中点对齐baseline
: 项目的第一行文字的基线对齐stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
6、flex-grow属性(放大比例,默认为0,即如果存在剩余空间,也不放大)
flex-grow:
默认为0
- 如果所有项目的
flex-grow
属性都为1
,则它们将等分剩余空间
(如果有的话) - 如果一个项目的
flex-grow
属性为2
,其他项目都为1,则前者占据的剩余空间
将比其他项多一倍
比如父级是width: 800px,三个子级width: 200px,第二项将分掉剩余的空间比其他项多两倍(剩余200px
按照1:2:1
的比例占据)
7、flex-shrink属性(缩小比例,默认为1,即如果空间不足,则缩小)
flex-shrink:
默认为1
- 如果所有项目的
flex-shrink
属性都为1
,当空间不足时,都将等比例缩小 - 如果一个项目的
flex-shrink
属性为0
,其他项目都为1,则空间不足时,前者不缩小
8、flex-basis属性(在分配多余空间之前,项目占据的主轴空间)
flex-basis: | auto
可以设为跟width或height属性一样的值(比如350px),则项目将 占据固定空间
。
9、flex属性
flex属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选
flex: auto; (1 1 auto)
flex: none; (0 0 auto)