CSS：权威指南，第 5 版

第 11 章 灵活方框布局 灵活的方框布局

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

CSS Flexible Box Module Level 1，简称flexbox，让曾经困难重重的某些页面、小工具、应用程序和图库的布局任务变得几乎简单。 有了 flexbox，你往往不需要 CSS 框架。 在本章中，你将学会如何使用几行 CSS 来创建网站所需的几乎所有功能。

Flexbox 基础知识

Flexbox是一种简单而强大的页面组件布局方式，它可以决定空间分布、内容对齐和元素视觉排序的方式。内容可以轻松地纵向或横向排列，可以沿单一轴线布局，也可以多行排列。 还有更多

使用 flexbox，内容的外观可以不受源代码顺序的影响。虽然在视觉上有所改变，但 flex 属性不应影响屏幕阅读器阅读内容的顺序。

警告

规范规定屏幕阅读器应遵循源代码顺序，但截至 2022 年底，Firefox 遵循的是视觉顺序。截至本文撰写之时，有一项提案要求添加一个 CSS 属性，用于指定是遵循源代码顺序还是视觉顺序，因此不久就可以自行决定了。

也许最重要的是，有了灵活的盒式模块布局，就可以使元素在不同屏幕尺寸和不同显示设备上的表现具有可预见性。Flexbox 与响应式网站配合得非常好，因为当提供的空间增大或减小时，内容的大小也会随之增大或减小。

Flexbox 的工作原理是父子关系。通过在元素上声明display: flex 或display: inline-flex ，即可激活 Flexbox 布局。 元素将成为一个柔性容器，在提供的空间内安排其子元素并控制它们的布局。该柔性容器的子元素则成为柔性项。 请看下面的样式和标记，如图 11-1 所示：

div#one {display: flex;}
div#two {display: inline-flex;}
div {border: 1px dashed; background: silver;}
div > * {border: 1px solid; background: #AAA;}
div p {margin: 0;}

<div id="one">
    <p>flex item with<br>two longer lines</p>
    <span>flex item</span>
    <p>flex item</p>
</div>
<div id="two">
    <span>flex item with<br>two longer lines</span>
    <span>flex item</span>
    <p>flex item</p>
</div>

图 11-1. 两种柔性容器

提示

查找 "播放 "符号 了解在线示例的可用性。本章的所有示例均可在 ...