Flexbox 弹性布局

Flexbox 用于一维布局,布局沿着单一的水平或垂直轴。理解弹性框关键是理解主轴和横轴的概念。主轴由 flex-direction 属性设置。为 row 则主轴沿行方向分布,为 column 则主轴沿列方向分布。相对于主轴,横轴沿另一个方向分布。

IMAGE

.container {
    display: flex; /* 或 inline-flex */
}
1
2
3

弹性容器属性

flex-direction

flex-direction:   direction:   writing-mode:
1
2
3
4

重新排序只影响视觉顺序,而不影响逻辑顺序(逻辑顺序是屏幕阅读器读取内容的顺序)。还要注意书写模式的影响(如 direction:rtl 或 writing-mode:vertical-rl)

flex-wrap

flex-wrap:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

弹性容器在换行后会创建多个弹性行。在空间分布方面,每一行就像一个新的弹性容器。

flex-flow

flex-direction flex-wrap 的缩写形式。

.container {
    /* 第一个值表示 flex-direction */
    flex-flow: column wrap;
}
1
2
3
4

align-content

align-content:
1
2
3
4
5
6
7
8
9
10

沿横轴分配空间。

justify-content

justify-content:
1
2
3
4

沿主轴分配空间。

place-content

align-content justify-content 的缩写形式。

.container {
  place-content: space-between;  /* 该值同时作用于两个轴 */
}
.container {
  /* 第一个值将作用于 align, 第二个值将作用于 justify */
  place-content: center flex-end; 
}
1
2
3
4
5
6
7

align-items

align-items:
text
text
text
text

将所有项目作为一个组沿横轴对齐。

gap, row-gap, column-gap

row-gap: px    column-gap: px
1
2
3
4
5
6
7
8
9
10

弹性项目属性

order

order:
0
1
2
3
4
5

直接指定某弹性项目的顺序。尽量不要使用 order,如果项目在逻辑上需要不同的顺序排列则更改 HTML!

flex-grow

flex-grow: (红)    flex-grow: (蓝)
0
0
0
0
0

定义了弹性项目的增长能力,它表示项目如何分配弹性容器内的可用空间。

flex-shrink

flex-shrink:
0
200px
200px
200px

定义弹性项目的缩减。

flex-basis

flex-basis:
auto

指定弹性项目在主轴方向上的初始大小,即弹性项目 content-box 的尺寸。可以为长度值、百分比或 auto content 关键字。

flex

flex-grow flex-shrink flex-basis 的缩写形式。

.item {
  flex: 0 1 auto; /* 默认值 */
}
.item {
  flex: 5; /* 相当于 flex-grow: 5; flex-shrink: 1; flex-basis: 0%; */
}
1
2
3
4
5
6

常用设置:

  • flex: 1 所有项目的大小一致并忽略内容的大小
  • flex: auto 每个项目被设为最大内容之后均分剩余空间,因此大项目会获得更多空间
  • flex: none 用于只是使用弹性框来对齐但不需要任何弹性行为

align-self

align-self: align-items:
text
text
stretch
text
text

沿横轴对齐单个项目,覆盖 align-items

其它

对齐属性中:

  • justify-* 表示使用主轴
  • align-* 表示使用横轴
Last Updated:
Contributors: ssbunny