设置在容器上的属性
flex-direction
- row(
默认值
):主轴为水平方向,起点在左端。 - row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
- row(
- flex-wrap
- nowrap(
默认
):不换行 - wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
- nowrap(
- flex-flow
- flex-direction属性和flex-wrap属性的简写形式,
默认值为row nowrap
- flex-direction属性和flex-wrap属性的简写形式,
justify-content
- flex-start(默认值):左对齐
- flex-end:右对齐
center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
center
:交叉轴的中点对齐。- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。