修改主轴方向#

flex-direction 用于设置 Flex 容器的主轴方向，决定 Flex 项目沿哪个方向排列。

基本语法：

1
.container {
2
  display: flex;
3
  flex-direction: row;
4
}

是否换行#

flex-wrap 用于设置当 Flex 项目在主轴方向上排列空间不足时，是否允许换行。

基本语法：

1
.container {
2
  display: flex;
3
  flex-wrap: wrap;
4
}

注意：

• nowrap 并不代表子元素绝对不会超出容器，空间不足时，项目可能被压缩，也可能溢出。
• wrap 只是允许换行，并不保证一定换行。
• 当 flex-direction: column 时，换行表现为排列到新的列，通常需要容器有明确的高度限制才能观察到

简写属性#

flex-flow 是 flex-direction 和 flex-wrap 的简写属性。

基本语法：

1
.container {
2
  display: flex;
3
  flex-flow: row wrap;
4
}

等价于：

1
.container {
2
  display: flex;
3
  flex-direction: row;
4
  flex-wrap: wrap;
5
}

常见写法：

注意： flex-flow 只负责排列方向和换行，与控制 Flex 项目自身伸缩的 flex 属性不同。

主轴对齐方式#

justify-content 用于控制 Flex 项目在主轴方向上的对齐方式以及剩余空间分配。

基本语法：

1
.container {
2
  display: flex;
3
  justify-content: center;
4
}

注意：

• justify-content 控制的是主轴，不一定是水平方向。
• 当 flex-direction: column 时，它控制垂直方向的对齐。
• 如果项目已经占满主轴可用空间，space-between 等空间分配方式可能看不出效果。
• 当存在多行项目时，justify-content 会分别作用于每一行。

交叉轴对齐方式#

align-items 用于控制 Flex 项目在交叉轴方向上的对齐方式。

基本语法：

1
.container {
2
  display: flex;
3
  align-items: center;
4
}

注意：

• align-items 控制交叉轴，不一定是垂直方向。
• 对多行 Flex 容器，它控制每一行内部项目的交叉轴对齐方式。
• stretch 不是无条件拉伸。如果项目已经设置固定高度（横向主轴时），通常不会被拉伸。

多行交叉轴对齐方式#

align-content 用于控制 Flex 容器中多行项目在交叉轴方向上的整体排列及剩余空间分配。

与 align-items 不同，它操作的重点是多条 Flex 行，而不是每个项目自身。

基本语法：

1
.container {
2
  display: flex;
3
  flex-wrap: wrap;
4
  height: 300px;
5
  align-content: space-between;
6
}

注意：

1. Flex 容器必须是多行，align-content 才能影响 Flex 行的排列。通常需要设置 flex-wrap: wrap。
2. 交叉轴方向需要有可供分配的剩余空间，才能明显观察 center、space-between 等效果。
3. align-content: stretch 拉伸的是 Flex 行，项目是否随之拉伸还受到 align-items 和项目尺寸的影响。

align-items 和 align-content 的区别#

这是 Flex 布局中比较容易混淆的两个属性。

例如：

1
.container {
2
  display: flex;
3
  flex-flow: row wrap;
4
  height: 300px;
5

6
  /* 每一行内部项目居中 */
7
  align-items: center;
8

9
  /* 所有行作为整体居中 */
10
  align-content: center;
11
}

两者可以同时设置，作用并不冲突。

记忆方式#

• flex-direction：决定往哪个方向排。
• flex-wrap：决定排不下是否换行。
• flex-flow：前面两个属性的简写。
• justify-content：控制主轴上的对齐。
• align-items：控制交叉轴上每行项目的对齐。
• align-content：控制交叉轴上多行项目的整体分布。

实际开发中，最常使用的是 flex-direction、justify-content、align-items 和 flex-wrap。其中 align-content 通常在多行布局中才需要重点考虑。

排列顺序：order#

order 用于控制 Flex 项目的视觉排列顺序，数值越小，排列越靠前。

基本语法：

1
.item {
2
  order: 0;
3
}

示例：

1
.item1 {
2
  order: 2;
3
}
4

5
.item2 {
6
  order: 0;
7
}
8

9
.item3 {
10
  order: -1;
11
}

注意： order 只影响视觉顺序，不会改变 HTML 中的 DOM 顺序，也不会相应改变键盘焦点和通常的屏幕阅读器阅读顺序，因此不应该用它替代有语义要求的内容排序。

放大比例：flex-grow#

flex-grow 用于控制 Flex 项目如何分配主轴方向上的剩余空间。

基本语法：

1
.item {
2
  flex-grow: 0;
3
}

示例：

1
.container {
2
  display: flex;
3
  width: 500px;
4
}
5

6
.item {
7
  flex-basis: 100px;
8
}
9

10
.item1 {
11
  flex-grow: 1;
12
}
13

14
.item2 {
15
  flex-grow: 2;
16
}
17

18
.item3 {
19
  flex-grow: 1;
20
}

三个项目的基础宽度都是 100px，容器宽度 500px，剩余空间为 200px。增长因子比例为 1 : 2 : 1，所以剩余空间分别分配 50px、100px、50px。

注意：

• flex-grow 分配的是剩余空间，并不是直接决定最终宽度比例。
• 只有主轴有可分配的正剩余空间时，才会发生增长。
• 实际结果还受 flex-basis、min-width、max-width 等条件影响。

缩小比例：flex-shrink#

flex-shrink 用于控制 Flex 项目在主轴空间不足时如何收缩。

基本语法：

1
.item {
2
  flex-shrink: 1;
3
}

示例：

1
.container {
2
  display: flex;
3
  width: 450px;
4
}
5

6
.item {
7
  width: 200px;
8
  flex-shrink: 1;
9
}

三个项目的原始宽度合计为 600px，但容器只有 450px。因此，满足收缩条件时，三个项目会分别缩小到 150px。

如果不希望项目被 Flex 收缩：

1
.item {
2
  width: 200px;
3
  flex-shrink: 0;
4
}

此时三个项目的宽度不会因 Flex 的收缩算法而减小，可能溢出容器。

注意：

• flex-shrink 默认值为 1，这也是 Flex 项目宽度有时小于设置值的原因。
• 收缩空间按 flex-shrink × flex-basis 等规则计算，并不是单纯按 flex-shrink 数值比例缩小。
• Flex 项目默认的 min-width: auto 可能阻止进一步收缩，必要时可设置 min-width: 0。

基础尺寸：flex-basis#

flex-basis 用于指定 Flex 项目在分配剩余空间或进行收缩之前的主轴基础尺寸。

基本语法：

1
.item {
2
  flex-basis: auto;
3
}

示例：

1
.container {
2
  display: flex;
3
}
4

5
.item {
6
  width: 200px;
7
  flex-basis: 100px;
8
}

当 flex-direction: row 时，flex-basis: 100px 会优先作为 Flex 项目的主轴基础宽度，而不是使用 width: 200px。

但最终宽度仍可能因为 Flex 伸缩和尺寸限制而发生变化。

注意：

• 主轴水平时，flex-basis 主要对应宽度。
• 主轴垂直时，flex-basis 主要对应高度。
• flex-basis 不等于最终尺寸，而是 Flex 布局计算的基础尺寸。

简写属性：flex#

flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性。

基本语法：

1
.item {
2
  flex: 0 1 auto;
3
}

等价于：

1
.item {
2
  flex-grow: 0;
3
  flex-shrink: 1;
4
  flex-basis: auto;
5
}

常见写法

单独对齐方式：align-self#

align-self 用于控制单个 Flex 项目在交叉轴方向上的对齐方式，可以覆盖 Flex 容器设置的 align-items。

基本语法：

1
.item {
2
  align-self: auto;
3
}

示例：

1
.container {
2
  display: flex;
3
  height: 200px;
4
  align-items: flex-start;
5
}
6

7
.item2 {
8
  align-self: center;
9
}
10

11
.item3 {
12
  align-self: flex-end;
13
}

注意：

• align-self 控制交叉轴，不能直接控制主轴上的单个项目对齐。
• align-self: auto 是采用父容器的对齐方式，并不是通过 CSS 属性继承实现的。
• 若项目在交叉轴上存在 auto 外边距，可能覆盖 align-self 的对齐效果。

Flex 项目属性总结#

实际开发应该重点掌握什么？

这六个属性可以分为四类：

• 顺序控制：order
• 弹性尺寸控制：flex-grow、flex-shrink、flex-basis、flex
• 单独对齐：align-self

其中，日常开发最值得重点掌握的是 flex、flex-shrink 和 align-self。

尤其需要理解：flex-grow 分配剩余空间，flex-shrink 处理空间不足，flex-basis 提供计算的基础尺寸。 这三个属性共同决定 Flex 项目在主轴方向上的最终尺寸，而不是彼此独立地控制宽高。

圣杯布局#

github代码仓库：https://github.com/youzi177/css-layout-lab

慕课网首页改造#

github代码仓库：https://github.com/youzi177/css-layout-lab