当前内容所在位置(可进入专栏查看其他译好的章节内容)
- 第一章 层叠、优先级与继承(已完结)
- 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 弹性子元素的大小(精译中 ⏳)
第二部分 精通布局
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 the
world turn to <b>Ink</b> to communicate
and 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”上,则两个菜单项都会靠右对齐。
弹性子元素的间隙设置还有很多其他配置,比如在弹性容器内均匀分布各弹性子元素等,后续会有介绍。不过本节介绍的样式对于导航菜单这个示例而言已经够用了。