【CSS in Depth 2 精译_023】第四章概述 + 4.1 Flexbox 布局的基本原理

本文主要是介绍【CSS in Depth 2 精译_023】第四章概述 + 4.1 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 弹性子元素的大小（精译中 ⏳）

文章目录

第二部分精通布局
第四章 Flexbox 弹性盒布局
- 4.1 Flexbox 的原理
- - 4.1.1 构建一个基础的 Flexbox 菜单
  - 4.1.2 添加内边距和元素间距

第二部分精通布局

CSS 提供了多种工具来控制网页布局。本书第二部分（涵盖第 4 ~ 7 章）将介绍其中最重要的几种，包括弹性盒布局、网格布局及定位。这些工具本质上讲并没有优劣之分，只是各自的功能实现略有不同。我将介绍它们各自的工作原理，以便利用这些知识在页面上进行混搭，最终实现理想的效果。之后，您还会学习响应式设计的构建方法，让页面布局能够适应用户的各种屏幕尺寸。

第四章 Flexbox 弹性盒布局

本章概要

使用 Flexbox 布局页面元素
弹性容器与弹性元素
主轴与副轴
Flexbox 里的元素大小
Flexbox 里的元素对齐

第三章介绍了常规文档流（normal document flow），它是浏览器默认的页面元素布局方式。接下来的几章内容，将重点考察其他现成的布局形式，尤其是弹性盒布局、网格布局以及定位。有了这些工具，布局时就有了更多的选择，并能用可以想象到的任何方式来构建页面。

Flexbox，全称为 弹性盒子布局（Flexible Box Layout），是一种布局页面元素的新方法，主要用于单行或单列的元素排列。弹性盒布局也能轻松解决困扰我们许久的垂直居中和等高列问题。

要说 Flexbox 有什么缺点的话，应该就是那多到令人望而生畏的配置项了。它为 CSS 引入了十几种新属性，包括一些简写属性。若要一口气拿下这些属性，难度可想而知。我刚开始学 Flexbox 时感觉就像拿着高压水枪喝水，很难记住所有的新属性。这次我将从最核心的属性入手，循序渐进拿下 Flexbox。

我会先介绍 Flexbox 布局的一些的基本原理，然后看几个实战案例。Flexbox 不必等到学完所有新属性才能用，大多数繁重的工作往往只需要搞定其中的某几个属性就可以了。剩下的属性则用于进一步控制元素的对齐和间距，它们放在本章末尾进行介绍。最后再提供一份 Flexbox 参考指南，以备不时之需。

4.1 Flexbox 的原理

一切得从我们熟悉的 display 属性开始。给元素设置样式 display: flex，该元素就成为了一个 弹性容器（flex container），其直接子元素也相应地变为 弹性子元素（flex items）。默认情况下，弹性子元素会在同一行从左至右并排排列。宽度方面，弹性容器类似块级元素，会填满所有可用宽度；而弹性子元素则未必。这些弹性子元素的高度相等，均由其内容决定。

提示

弹性容器还可以用 display: inline-flex 来创建，但这样的容器在行为上更像一个行内块级元素（inline-block element），而非块级（block）元素。它会和其他行内元素一起流动，但宽度不会自动扩展到 100%。而内部的弹性子元素，行为上则通常跟用 display: flex 创建的一致。实际开发中很少用到 display: inline-flex。

之前介绍的 display 的取值，如 inline、inline-block 等，只会影响设置了该样式的元素，而 Flexbox 则不同。一个弹性容器可以控制其内部元素的布局。典型的弹性容器及其子元素布局情况如图 4.1 所示。

图 4.1 弹性容器及其子元素

图 4.1 弹性容器及其子元素示意图

各弹性子元素沿着 主轴（main axis） 从左边的 主轴起点（main start） 顺次排列到右边的 主轴终点（main end）。同理，垂直于主轴的叫 副轴（cross axis），方向则是从顶部的 副轴起点（cross start） 到底部的 副轴终点（cross end）。

主轴和副轴的概念有点类似行内（inline）方向和块（block）方向。学到后面您就会发现，Flexbox 的很多属性都是以“起点（start）”和“终点（end）”这样的叫法成对出现的。这些轴的方向是可以改变的，以满足元素向其他方向流动的需要。本章稍后会进行演示。

这些概念（弹性容器、弹性子元素以及主轴、副轴）涉及 Flexbox 布局的大量知识点。在掌握这些新属性之前，仅用一句 display: flex 就已经完成了大量准备工作。为了验证 Flexbox 的威力，接下来将构建如图 4.2 所示的页面布局。

图 4.2 使用 Flexbox 布局的最终效果

图 4.2 使用 Flexbox 布局的最终效果

该页面旨在演示 Flexbox 的几种方法，将分别在页面顶部的导航菜单、三个白色区域、以及右下角的 $20.00 字样中应用 Flexbox 布局。

按照代码清单 4.1 给出的内容，新建一个页面，关联新的样式表，并更新 HTML 标记：

代码清单 4.1 页面 HTML 标记

<!doctype html>
<html lang="en-US">
<head><title>Flexbox example page</title><link href="styles.css" rel="stylesheet"type="text/css" />
</head>
<body><div class="container"><header><h1>Ink</h1></header><nav><!-- 导航菜单 --><ul class="site-nav"><li><a href="/">Home</a></li><li><a href="/features">Features</a></li><li><a href="/pricing">Pricing</a></li><li><a href="/support">Support</a></li><li class="nav-right"><a href="/about">About</a></li></ul></nav><main class="flex"><!-- 大主体板块 --><div class="column-main tile"><h1>Team collaboration done right</h1><p>Thousands of teams from all over theworld turn to <b>Ink</b> to communicateand get things done.</p></div><!-- 侧边栏包含两个上下堆叠的子版块 --><div class="column-sidebar"><div class="tile"><form class="login-form"><h3>Login</h3><p><label for="username">Username</label><input id="username" type="text"name="username"/></p><p><label for="password">Password</label><input id="password" type="password"name="password"/></p><button type="submit">Login</button></form></div><div class="tile centered stack"><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></div></main></div>
</body>
</html>

这段 HTML 关联了一个文件名为 styles.css 的样式表，需要在本地同步创建，然后将代码清单 4.2 的样式更新进去。经过上一章的学习，里面的大部分样式应该不会陌生了。

代码清单 4.2 页面基本样式

*,
::before,
::after { /* 全局 box-sizing 设置 */box-sizing: border-box;
}body {/* 给网页设置绿色背景及 sans-serif 无衬线字体 */margin: unset;background-color: #709b90;font-family: Helvetica, Arial, sans-serif;
}.stack > * + * {/* 用来间隔元素的 stack 样式类 */margin-block-start: 1.5em;
}/* 用于居中页面内容的双容器设置 */
.container {max-inline-size: 1080px;margin-inline: auto;
}

这样页面就初具雏形了，接下来应用 Flexbox 布局。先从顶部的导航菜单入手。

4.1.1 构建一个基础的 Flexbox 菜单

本例要实现的导航菜单效果如图 4.3 所示。其中大部分菜单项为靠左对齐，只有一个菜单项靠右对齐。

图 4.3 导航菜单中的菜单项用 Flexbox 处理后的效果图

图 4.3 导航菜单中的菜单项用 Flexbox 处理后的效果图

要实现这样的菜单，需要考虑清楚让哪个元素做弹性容器。选定容器后，要时刻谨记其子元素将成为弹性子元素。本例中的弹性容器应该是那个无序列表（<ul>）。它的子元素，即列表项（<li>）就是弹性子元素，如以下代码所示：

<ul class="site-nav"><li><a href="/">Home</a></li><li><a href="/features">Features</a></li><li><a href="/pricing">Pricing</a></li><li><a href="/support">Support</a></li><li class="nav-right"><a href="/about">About</a></li>
</ul>

接下来分步骤实现导航菜单效果。首先给列表元素设置样式 display: flex；然后再覆盖掉浏览器默认的列表样式，并设置字体颜色。最终效果如图 4.4 所示。

图 4.4 设置了字体颜色和 Flexbox 属性的导航菜单效果

图 4.4 设置了字体颜色和 Flexbox 属性的导航菜单效果

在页面 HTML 标记中，元素 <ul> 上的 site-nav 类，可以用作样式选择器。按以下代码更新本地样式表。

代码清单 4.3 将菜单设为 Flexbox 并添加字体颜色

.site-nav {display: flex;  /* 令 site-nav 为弹性容器，则其子元素成为弹性子元素 */padding: unset;  /* 移除浏览器默认的左内边距 */list-style-type: none;  /* 移除浏览器默认的列表项目符号 */background-color: #5f4b44;
}.site-nav > li > a {background-color: #cc6b5a;color: white;text-decoration: none;  /* 删除浏览器默认的链接下划线样式 */
}

注意，这里需要处理三个层级的元素：site-nav 列表（弹性容器）、列表项（弹性子元素）以及内部的锚点标记（链接）。选择器用的是直接后代组合器（>），确保选中其直接子元素。严格来讲，这样写不是很有必要，况且后续也不大可能在导航菜单中加入嵌套的列表，但保险起见，限制一下也无伤大雅。想了解更多组合选择器的写法，可以参阅附录 A。

4.1.2 添加内边距和元素间距

这时的菜单看着还有点“营养不良”，得来点内边距让它更“饱满”些，而且加内边距的时候弹性容器和菜单链接上都要加。实现后的效果如图 4.5 所示。

图 4.5 加上内边距及链接样式后的菜单效果

图 4.5 加上内边距及链接样式后的菜单效果

要是还不太熟悉这类菜单的构建要领（甭管是用 Flexbox 还是其他布局方法），请务必重视这一实现细节。本例应该把菜单项的内边距设置到列表项内部的 <a> 元素上，而非列表项 <li> 元素本身。因为当用户点击某个菜单链接时，可供点击的整个区域无论是从外观还是行为上看，都应当符合用户对点击一个链接元素的预期。鉴于链接行为本身来自 <a> 元素，要是把 <li> 元素仅仅做成一个美观大气的按钮，而给点击行为只预留很小一块目标区域（<a>）的话，这样的设计显然不符合用户预期。

按照以下内容更新本地样式表，给菜单填充内边距。

代码清单 4.4 为菜单及其链接添加内边距样式

.site-nav {display: flex;padding: 0.5rem;  /* 在菜单容器上、链接外部添加内边距 */list-style-type: none;background-color: #5f4b44;
}.site-nav > li > a {display: block;  /* 令链接为块级元素，以撑开父元素的高度 */padding: 0.5em 1em;  /* 在链接元素上设置内边距 */background-color: #cc6b5a;color: white;text-decoration: none;
}

注意，此时的链接被设置成了块级元素。倘若仍保持行内元素不变，则它们的父元素高度将由其行高（line height）决定，而非内边距及内容本身。这显然不符合预期。

再来看看菜单项的间隔该怎么设置。借助外边距 margin 固然可以实现，但 Flexbox 为元素间距量身定制了一个叫 gap 的特殊属性，只要一句 gap: 1rem 就能在每个弹性子元素之间预留出 1rem 的空间。

此外，Flexbox 还可以用 margin: auto 来填充弹性子元素间的所有可用空间。利用这个特性就能把最后一个菜单项推到容器最右边。至此，菜单样式就都搞定了（如图 4.6 所示）。

图 4.6 间距 gap 和外边距 margin 让各弹性子元素间隔开来

图 4.6 间距 gap 和外边距 margin 让各弹性子元素间隔开来

上图中的具体样式详见代码清单 4.5。该样式设置了元素间隙（gap），并将间隙的取值存入一个自定义属性中，以便复用；此外，还给最后一个按钮指定了一个值为 auto 的左侧外边距，从而实现了按钮的右对齐。按照以下代码清单更新本地样式表。

代码清单 4.5 利用外边距给弹性子元素添加间距

:root {--gap-size: 1.5rem;
}.site-nav {display: flex;gap: var(--gap-size);  /* 为各弹性子元素加上 1.5rem 的间隙 */padding: 0.5rem;list-style-type: none;background-color: #5f4b44;
}.site-nav > .nav-right {/* 弹性容器内的 auto 外边距将填满所有可用空间 */margin-inline-start: auto;
}