【CSS in Depth 2 精译_026】4.4 Flexbox 元素对齐、间距等细节处理（上）

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第一章 层叠、优先级与继承（已完结）
  • 1.1 层叠
  • 1.2 继承
  • 1.3 特殊值
  • 1.4 简写属性
  • 1.5 CSS 渐进式增强技术
  • 1.6 本章小结
• 第二章 相对单位（已完结）
  • 2.1 相对单位的威力
  • 2.2 em 与 rem
  • 2.3 告别像素思维
  • 2.4 视口的相对单位
  • 2.5 无单位的数值与行高
  • 2.6 自定义属性
  • 2.7 本章小结
• 第三章 文档流与盒模型（已完结）
  • 3.1 常规文档流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 负的外边距
  • 3.5 外边距折叠
  • 3.6 容器内的元素间距问题
  • 3.7 本章小结
• 第四章 Flexbox 布局
  • 4.1 Flexbox 布局原理（已完结）
    • 4.1.1 创建一个基础的 Flexbox 菜单
    • 4.1.2 添加内边距与间隔
  • 4.2 弹性子元素的大小（已完结）
    • 4.2.1 使用 flex-basis 属性
    • 4.2.2 使用 flex-grow 属性
    • 4.2.3 使用 flex-shrink 属性
    • 4.2.4 实际应用
  • 4.3 弹性布局的方向（已完结）
    • 4.3.1 变更弹性布局的方向
    • 4.3.2 登录表单的样式设计
  • 4.4 对齐、间距等细节处理 ✔️
    • 4.4.1 理解弹性容器的属性 ✔️
    • 4.4.2 理解弹性子元素的属性（精译中 ⏳）
    • 4.4.3 使用对齐属性（精译中 ⏳）
  • 4.5 本章小结（精译中 ⏳）

4.4 对齐、间距等细节处理

至此，我们已经对 Flexbox 最为核心的知识点有了全面深入的了解。不过前面提到过，还有很多设置项偶尔也能派上用场，它们大多与弹性子元素在弹性容器中的对齐方式或间距设置有关。还有一些设置用于控制换行，或者重新对子元素单独排序。

这些控制属性都罗列在了以下几张图表中：图 4.18 和图 4.19 列出了可在弹性容器上设置的所有属性；图 4.20 则列出了弹性子元素的所有属性。这些属性中很多也适用于下一章将要重点介绍的 网格布局（grid layout）。

图 4.18 弹性容器的属性

图 4.19 弹性容器的属性（续）

图 4.20 弹性子元素的属性

通常情况下，创建一个弹性盒子需要用到前面介绍的以下方法：

• 选定一个容器及其子元素，并给容器设置 display: flex；
• 如有必要，再对容器设置 gap 和/或 flex-direction 属性；
• 必要时，为弹性子元素设置 flex 属性值来控制尺寸大小。

待元素大致摆放就位后，就可以按需设置其他 Flexbox 属性了。我建议先熟悉迄今为止学过的知识点，然后再继续本章后续内容，了解 Flexbox 提供的这些功能属性，等到用得着的时候再来记住它们，毕竟一口气记住所有这些以 align-* 和 justify-* 开头的属性名绝非易事。什么时候用得上了，再回过头来参考参考就行了。剩下的大部分属性其实都比较简单。

4.4.1 理解弹性容器的属性

弹性容器上有好几个属性可以控制弹性子元素的布局，首先是前面 4.3 小节介绍过的 flex-direction，本节再来看看其他属性。

1 flex-wrap 属性

flex-wrap 属性可以让弹性子元素换到新的一行或多行显示，其属性值可以是 nowrap（初始值）、wrap 或 wrap-reverse。启用换行后，子元素不再随指定的 flex-shrink 值收缩；相反，任何溢出弹性容器的子元素都将换行显示。

如果弹性布局的方向是 column 或 column-reverse，flex-wrap 也能让弹性子元素换到下一列展示，只不过是在容器高度被限制的情况下才会发生；否则容器会纵向延展来包含溢出的子元素。

2 flex-flow 属性

flex-flow 属性是 flex-direction 和 flex-wrap 的简写形式。例如 flex-flow: column wrap 指定弹性子元素从上到下排列，必要时换到下一列显示。

3 justify-content 属性

当弹性子元素未填满容器时，可以用 justify-content 属性来控制子元素沿主轴方向的间距。支持的属性值还有几个新关键字：flex-start、flex-end、center、space-between、space-around 以及 space-evenly。当值为默认的 flex-start 时，各子元素将从主轴的起始位置顺序排列。例如主轴方向通常为从左至右，起始位置就是左侧。如果不设置 gap 或外边距，子元素间就不存在间距。若值为 flex-end，则从主轴终点位置开始排列，center 则让子元素整体居中。

注意，这里的 start 和 end 其实是让子元素靠左或靠右排列的逻辑值，它们取决于具体的书写模式，而与主轴方向无关；而 left 与 right 则是绝对值，始终按靠左和靠右排列执行，与书写模式及弹性布局方向无关。

均匀分布弹性子元素的方法共有三种，每种方法在首个子元素之前、末尾子元素之后提供不同的空间：space-between 令首尾子元素分别紧贴主轴的起点与终点，其余间隙均匀分布；space-around 则令首尾子元素的外围空间等于各子元素间均布间隙的一半；而 space-evenly 则是令首尾子元素的外围空间与子元素间的均布间隙相等。

间距（spacing）是在算出外边距与 flex-grow 值之后生效的。换言之，如果任意子元素的 flex-grow 属性不为 0、或者任何子元素在主轴方向的外边距值为 auto，那么属性 justify-content 就失效了。

4 align-content 属性

若启用换行（即 flex-wrap），align-content 属性就可以控制弹性容器内沿副轴方向各行之间的间距。支持的属性值有 flex-start、flex-end、center、stretch（初始值）、space-between 以及 space-around。这些值对间距的处理类似上面的 justify-content。

此外还有一个 place-content 属性，它是 align-content 与 justify-content 的简写形式。

5 align-items 属性

控制子元素主轴方向对齐方式的是 justify-content 属性；而控制它们在副轴方向对齐的则是 align-items 属性，其初始值为 stretch，可以让子元素在水平布局时填满容器高度，而在垂直布局时填满容器宽度，因此可用于实现等高列。

其他的属性值能让弹性子元素保留自身的大小，而不必填充容器大小（类似 vertical-align 的概念）

• flex-start 与 flex-end：令子元素与副轴的开始和结束位置对齐（分别对应水平布局时的顶部与底部）。
• start 与 end：均为逻辑值，根据弹性容器的书写模式对各子元素进行对齐。
• self-start 与 self-end：也是逻辑值；也是根据各子元素的书写模式来设置对齐方式；但仅在某弹性子元素的书写模式与弹性容器各异时，二者才会与 start 及 end 不同。
• center：令子元素居中。
• baseline：让元素根据每个弹性子元素的首行文本的基线对齐。基线（baseline）是文本底边所在的参考线。

当想让一个弹性子元素中大字号标题的基线与其他子元素中的小号字的文本基线对齐时，baseline 就能大展身手了。另外，还可以在此基础上加注 first 或 last 字样，指定要对齐到文本的哪一行。例如，align-items: last baseline 就能让各弹性子元素按各自文本的最后一行对齐。

提示

justify-content 与 align-items 属性的名称很容易混淆。我是参考文本处理器中的文本样式的含义来分辨它们的：可以“调整”（justify）文字，使其在水平方向的两端之间均匀分布；而 align-items 更像 vertical-align，能让行内文本在垂直方向上“对齐”（align）。

最后还有一个 place-items 属性，它是 align-items 与 justify-items 的简写形式。特别注意，justify-items 只能在第 5 章即将介绍的 网格布局（grid layout） 中使用，而在弹性容器中会被忽略。