【CSS in Depth 2 精译_027】4.4 Flexbox 元素对齐、间距等细节处理（下）+ 4.5 本章小结

news2024/11/17 7:42:48

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

第一章层叠、优先级与继承（已完结）
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.2 理解弹性子元素的属性
  - - 1. align-self 属性
    - 2. order 属性
  - 4.4.3 使用对齐属性
- 4.5 本章小结

4.4.2 理解弹性子元素的属性

前面已经介绍过属性 flex-grow、flex-shrink、flex-basis 以及它们的简写属性 flex（详见 4.2 小节）。本节再介绍两个用在弹性子元素上的属性：align-self 与 order。

1. align-self 属性

该属性控制弹性子元素在副轴方向上的对齐方式。它与设置在弹性容器上的 align-items 属性效果相同，但 align-self 可以单独给弹性子元素设置不同的对齐方式。指定初始值 auto 后，将以容器的 align-items 值为准；其他属性值则会覆盖容器上的对应设置。此外，align-self 支持的关键字还与 align-items 相同，即：flex-start、flex-end、start、end、self-start、self-end、center、stretch 以及 baseline。

Flexbox 中还有一个 place-self 属性，它是 align-self 和 justify-self 的简写形式。特别注意，justify-self 仅在网格布局（第 5 章将重点介绍）中使用，在弹性容器中会被忽略。

2. order 属性

正常情况下，弹性子元素会按照其在 HTML 源码中出现的顺序，从主轴起点开始，沿主轴方向进行排列。借助 order 属性，则可以变更子元素的排列顺序。其属性值可以为任意正整数或负整数。若出现重复的 order 值，则按源码顺序排列各子元素。

初始状态下，所有弹性子元素的 order 值都为 0。若值为 -1，则元素会移动到列表的开头；若值为 1，则移动到最后。这样就可以根据需求设置每个子元素的 order 值，以便重新排序。属性值之间可以不连续。

警告

请务必谨慎使用 order 属性。当屏幕上的视觉布局顺序与源码顺序差别过大时，可能会影响网站的可访问性（accessibility）。在大多数浏览器中使用 Tab 健浏览页面元素的顺序是与源码保持一致的，倘若视觉上差异过大，难免会令人费解。此外，视力受损的用户所使用的大部分屏幕阅读器也是基于页面源码顺序来实现各种功能的。

4.4.3 使用对齐属性

本节将利用前面介绍的这些 Flexbox 属性来给本章的示例页面画上一个圆满的句号。示例中的最后一个板块包含一个带样式的价格以及一个引导（即 call-to-action，缩写为 CTA，又译为行动召唤）按钮。最终效果如图 4.21 所示。

图 4.21 应用 Flexbox 布局实现的文字效果

图 4.21 应用 Flexbox 布局实现的文字效果

该板块的 HTML 标记已在页面写好了，如下所示：

<div class="tile centered">
  <small>Starting at</small>
  <div class="cost">
    <span class="cost-currency">$</span>
    <span class="cost-dollars">20</span>
    <span class="cost-cents">.00</span>
  </div>
  <a class="cta-button" href="/pricing">
    Sign up
  </a>
</div>

$20.00 字样包裹在元素 <div class="cost"> 中，该元素可视为弹性容器。它有三个弹性子元素，分别对应需要设置对齐方式的三处文字部分（即 $、20 以及 .00）。这里选用 span 元素而非 div 来放置文本，因为 span 本就是行内元素。这样，即便因为某些原因无法加载 CSS，文本 $20.00 也依旧能在同一行进行显示。

在下面的代码清单 4.11 中，我利用了 justify-content 属性让弹性子元素在弹性容器内水平居中。然后再用 align-items 和 align-self 令它们垂直对齐。将这些样式更新到本地示例页，查看最终效果。

代码清单 4.11 价格板块的样式设计

.centered {
  text-align: center;
}
 
.cost {
  display: flex;
  justify-content: center;  /* 在主轴方向上居中对齐 */
  align-items: center;  /* 在副轴方向上居中对齐 */
  line-height: 0.7;
}

/* 给价格的不同部分设置不同的字号 */
.cost-currency {
  font-size: 2rem;
}
.cost-dollars {
  font-size: 4rem;
}
.cost-cents {
  font-size: 1.5rem;
  align-self: flex-start;  /* 覆盖该元素的 align-items 设置，令其与容器顶部而非中间部分对齐 */
}
 
.cta-button {
  display: block;
  background-color: #cc6b5a;
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
}

以上代码对带样式的标价部分 $20.00 应用了 Flexbox 布局，同时定义了一个 centered 类来居中剩下的文字，最后借助样式类 cta-button 为 CTA 引导按钮设置了对应样式。

代码中有个比较特殊的样式声明：line-height: 0.7。这是因为每个弹性子元素的文字行高决定了各子元素的高度。也就是说，元素高度要比文字本身的高度略高一些。因为 1em 的高度包含了文字内容的下行部分（descenders），而示例中的文字刚好没有，于是实际字符要比 1em 略矮一些。经过反复尝试，直到 20 的顶部与 .00 在视觉上对齐，才得到这个样式值。想了解更多文本相关的内容，请参考本书第 13 章。

Flexbox 的出现是 CSS 的一大进步。一旦熟悉，就可能想在页面的每个地方都用用看。算是给你个提醒吧：多多拥抱常规文档流，Flexbox 仅在必要的时候再考虑使用。这样讲并不是不让您用 Flexbox，而是希望您不要拿着锤子满世界找钉子。