本文主要是介绍【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 弹性容器及其子元素示意图
各弹性子元素沿着 主轴（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 布局的最终效果
该页面旨在演示 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 处理后的效果图
要实现这样的菜单，需要考虑清楚让哪个元素做弹性容器。选定容器后，要时刻谨记其子元素将成为弹性子元素。本例中的弹性容器应该是那个无序列表（<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 属性的导航菜单效果
在页面 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 加上内边距及链接样式后的菜单效果
要是还不太熟悉这类菜单的构建要领（甭管是用 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.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;
}
这里只对一个元素（即菜单项“About”）设置了值为 auto 的外边距。要是设置到菜单项“Support”上，则两个菜单项都会靠右对齐。
弹性子元素的间隙设置还有很多其他配置，比如在弹性容器内均匀分布各弹性子元素等，后续会有介绍。不过本节介绍的样式对于导航菜单这个示例而言已经够用了。
这篇关于【CSS in Depth 2 精译_023】第四章概述 + 4.1 Flexbox 布局的基本原理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
