Flexbox 弹性布局
Flexbox 用于一维布局，布局沿着单一的水平或垂直轴。理解弹性框关键是理解主轴和横轴的概念。主轴由 flex-direction 属性设置。为 row 则主轴沿行方向分布，为 column 则主轴沿列方向分布。相对于主轴，横轴沿另一个方向分布。
.container {
display: flex; /* 或 inline-flex */
}
1
2
3
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
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
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
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-*表示使用横轴