完整的 Flexbox CSS 指南
flexbox/布局/css| 2025-07-23
正在学习如何使用 Flexbox？想知道如何用 CSS 实现 Flexbox 布局？不了解 Flexbox 的工作原理？欢迎来到完整的 Flexbox CSS 指南！
Flexbox 是 Flexible Box Layout 的缩写。它是 CSS 编程语言的一项功能。但这些细节我们并不关心。最重要的是要理解如何使用它。
要理解Flexbox的工作原理和如何使用它，我们需要理解一切都依赖于的基本原则：轴。
但在开始之前，这里是这本Flexbox完整指南的目录：
Table of Contents
Flexbox 来自哪里？
为什么使用 Flexbox？
如何使用 Flexbox：容器与元素
将元素并排对齐
元素间距
为元素指定方向 (flex-direction)
列与行
调整元素大小 (inline-flex)
定义元素的顺序 (order)
水平和垂直居中
在多行中使用 Flexbox (flex-wrap)
使用简写属性加快速度 (flex-flow)
浏览器兼容性表格
进一步学习
如何练习使用 Flexbox？
Flexbox 来自哪里？
Flexbox 起源于 W3C(负责制定未来网络标准的联盟)于 2009 年发布的首个公开草案。直到 4 年后的 2012 年，Flexbox 才晋升为“候选推荐标准”。
自此之后，Flexbox迅速成为全球最常用的CSS布局方法之一。这一新特性也在2013年被《Net》杂志评为“最佳新网络技术”。
为什么要使用Flexbox？
在2012年之前，开发者用于构建网站结构的手段非常有限。
排列元素仅有两种方式：
使用浮动(float)
使用inline-block元素
而这种方式并不总是令人愉快的。
幸运的是，随着Flexbox的出现，一切都变得简单得多：在页面中央居中或简单地将两个元素并排放置都变得异常轻松。
如何使用 Flexbox？
使用 Flexbox 只需理解一个 简单 的 原则。一切围绕以下两点展开：
一个 容器(父元素)
以及 子元素
让我们从一个基本示例开始。以下是经典的 HTML 代码：
HTML
这段 HTML 代码没什么新奇之处。我们有一个父元素，其 ID 为 container，该父元素包含三个具有类名 child 的子元素。
让我们添加一些颜色，以便更清楚地看到不同元素。接下来处理 CSS：
CSS
.child {
background-color: blue;
padding: 100px;
border-radius: 50px;
}
因此我们得到以下结果：
Flexbox 示例
我们的目标很简单：我们希望将三个元素并排排列。
将元素并排排列
要将元素并排排列，我们需要使用一个新属性。
这个新属性将允许我们在浏览器中启用 Flexbox。它应用于父元素。
CSS
#container {
display: flex;
}
以下是结果：
display: flex 属性的结果
仅通过一个属性，我们就将元素并排对齐了！过去，我们可能需要使用 inline-block 等属性。这将变得冗长且复杂。而使用 Flexbox，则快速。
元素间距
我们的元素现在并排排列，但它们仍然太过靠近。
我们可以使用 margin 属性调整外部边距，但还有更简单的方法。
那么，如何使用 Flexbox CSS 调整元素间距？感谢 gap 属性！
以下是我们要添加到 container 元素中的内容：
CSS
#container {
display: flex;
gap: 10px;
}
以下是 Flexbox 中 gap 属性的效果：
使用 Flexbox 的间距属性示例
这样看起来更漂亮，对吧？ 😬
在本指南的剩余部分中，我们将对 Flexbox CSS 中的元素进行 编号。
以下是我们的全新 HTML 代码：
HTML
我们还为 .child 类添加了 color: white 属性，以获得以下效果：
带编号的 Flexbox 元素示例
现在我们的元素已经 编号，让我们一起看看 如何使用 Flexbox 为元素指定方向！
为元素指定方向
根据具体场景和情况，有时需要 反转 元素的顺序。如果你为阿拉伯国家设计界面，可能需要反转元素顺序以适应其书写方向。
借助 Flexbox，我们可以利用 flex-direction 属性选择元素的方向。
使用方法如下：
CSS
#container {
display: flex;
gap: 10px;
flex-direction: row-reverse;
}
结果如下：
使用 flex-direction 的 Flexbox 示例
如我们所见，元素已被反转。
我们通过在 flex-direction 属性上设置 row-reverse 值实现这一点。该值允许我们(如其名称所示)反转行，使第一个元素成为最后一个，依此类推。
flex-direction 属性有 四个不同值。以下是它们的解释：
row(默认)- 元素在行中从左到右排列
row-reverse – 元素在行中从右到左排列
column – 元素在列中从上到下排列
column-reverse – 元素沿列从下到上排列
到目前为止，我们看到元素沿同一行从左到右(使用 row)或从右到左(使用 row-reverse)排列。但我们也可以将元素 排列在列中。让我们仔细看看。
列与行
在 Flexbox 中，一切都由行和列定义。元素实际上是相对于这两个轴之一对齐的：水平轴(横坐标)和垂直轴(纵坐标)。
可以通过更改 flex-direction 属性的值来改变这些元素的对齐方向。以下是使用值 column 的示例。
CSS
#container {
display: flex;
gap: 10px;
flex-direction: column;
}
结果如下：
使用 flex-direction: column 的示例
修改元素的大小
可以修改元素的大小，即它们在页面上占用的空间。
具体来说，我们可以让元素仅占用其内容(或 CSS 样式)的宽度。
具体操作如下：只需指定元素类型为inline-flex而非block。
为此，我们通过CSS代码进行设置。
CSS
#container {
display: inline-flex;
gap: 10px;
flex-direction: column;
}
结果如下：
inline-flex示例
指定元素顺序
使用 Flexbox，我们可以指定元素的位置。
为此，我们可以使用 order 属性。该属性接受我们希望元素显示的位置作为值。
我们将此属性添加到要定位的元素上。例如，要定位第 1 个元素，我们可以这样做：
HTML
为每个子元素添加另一个类(child-1 / child-2 / child-3)。
CSS
.child-1 {
order: 2;
}
.child-2 {
order: 1;
}
.child-3 {
order: 3;
}
对于这些类中的每一个，我们然后添加 order 属性。
为了使该属性生效，必须为每个元素指定 顺序。如果你只为 child-1 类指定 order，它将被放置在最后——除非你给它指定一个小于 1 的位置。
水平和垂直居中
水平居中
借助 Flexbox，我们还可以将页面上的任何元素进行 水平居中 和 垂直居中。
如果你也曾花費數小時來居中元素：那些日子已經一去不復返了！
讓我們一起看看如何使用 Flexbox 進行水平居中。為此，你只需使用 justify-content 屬性。
CSS
#container {
display: flex;
gap: 10px;
justify-content: center;
}
以下是結果。
示例：使用 Flexbox 实现水平居中
仔细观察，我们可以将元素在所有方向上居中：
start(默认)- 允许元素居中对齐到左侧(或在阿拉伯国家居中对齐到右侧)
center – 允许元素居中对齐到中心
space-between – 允许元素被 推开，并在 中间留有空间
space-around – 允许元素被 推开，并在元素之间留有 比例空间，其中一半空间位于第一个元素的左侧和最后一个元素的右侧
space-evenly – 允许元素以 相同间距 分开，且所有侧面间距相等
例如，以下是 space-around 的效果(因为它不太直观)
示例：space-around 弹性布局
如您所见，每个侧边都有一个比例间距。两个元素之间的间距等于元素 1 的右侧间距与元素 2 的左侧间距之和，从而形成两倍大的间距。
垂直居中
要使用 Flexbox 实现垂直居中，您只需使用一个属性：align-items。
它允许你为容器内的所有元素(即所有子元素)定义对齐方式。更具体地说，它允许你为每个元素定义 align-self 的值。
该 align-self 属性可应用于子元素，而 align-items 则可定义在父元素上。
示例：align-items Flexbox
在此示例中，我们设置背景为黑色，并添加了 height: 100vh，使父元素占据页面高度的 100%(这更清晰地展示了 align-items: center 的效果)。
CSS
#container {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
height: 100vh
}
我们可以看出，三个元素在垂直方向上居中。它们在水平方向上也居中，因为我们设置了 justify-content: center 属性。
如我们所见，我们还可以结合多个 align-self 属性来独立居中元素。
以下是一个小示例。
CSS
#container {
display: flex;
gap: 10px;
justify-content: center;
height: 100vh
}
.child-1 {
align-self: start;
}
.child-2 {
align-self: center;
}
.child-3 {
align-self: end;
}
以下是结果。
示例 align-self Flexbox
每个元素具有不同的 align-self 值：
start(默认)- 元素对齐于 顶部 或 左侧(取决于行或列方向)
center – 元素对齐于 中心
end – 元素对齐于 底部 或 右侧(取决于行或列方向)
在多行中使用 Flexbox
到目前为止，我们一直在 单行 中使用 Flexbox：
从上到下(行)
从左到右(列)
实际上，完全可以在多行中使用Flexbox。当当前行没有更多空间时，元素会被推到新行。目前情况并非如此。
例如，如果元素有9个，它们看起来如下：
HTML
CSS
.child {
background-color: blue;
padding: 100px;
border-radius: 50px;
color: white;
}
#container {
display: flex;
gap: 10px;
}
body {
background: #0E0E0E;
}
以下是结果。
多个 Flexbox 元素的示例
如您所见，元素相互挤压，在水平轴上产生偏移(带有滚动条)。
要让元素在当前行空间不足时换行到新行，我们可以使用 CSS 属性 flex-wrap。
让我们尝试为 #container ID 添加属性 flex-wrap: wrap。
CSS
#container {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
以下是结果。
使用 flex-wrap 的 Flexbox 示例
需要注意的是，这个新属性 flex-wrap 可以有以下值：
nowrap(默认)- 元素被推到同一行
wrap – 不再适合的元素被移动到 下一行
wrap-reverse – 不再适合的元素被移动到 上一行
使用简写属性加快速度
我们发现了两个属性：flex-direction 和 flex-wrap。这两个属性允许我们 指定 Flexbox 的整体布局，即是否使用 列 或 行，以及是否为溢出的元素创建新列或新行。
通过使用所谓的简写属性，我们可以进一步加快操作速度。
正如其名，它允许在单个属性中指定flex-direction和flex-wrap的值：flex-flow。以下是一个示例。
CSS
#container {
flex-direction: row;
flex-wrap: wrap;
}
使用flex-flow属性：
CSS
#container {
flex-flow: row wrap;
}
轻而易举！我们首先指定了 flex-direction 的值，然后指定了 flex-wrap 的值。
重要的是要遵守这个顺序。你必须始终首先指定 flex-direction 的值，然后再指定 flex-wrap 的值。
浏览器兼容性表格
Flexbox 是 CSS 语言的一项功能，彻底改变了开发者的工作方式。自 2012 年发布以来，它已在日常使用的 浏览器 中广泛支持。以下是 兼容性表格，用于指定从哪个 版本 开始可以使用 Flexbox：
Flexbox兼容性表格
如果您想了解特定浏览器的最新版本，所有信息均可在caniuse网站上查阅。如您所见，Flexbox现已与全球最常用的浏览器完全兼容。因此您可以放心使用。
你对本文的反应是：
0
俺的神呀 0
赞一个 0
飘过~ 0
强 0
很实用 0
好文 0
笑死了 0
mark 0
敬佩 0
垃圾 0
0
看样子你已经点过这个了！
抱歉，你最多只能点三个！
你也许感兴趣的：
交互式演示教程教会你精通掌握 Flexbox 布局
使用 light-dark() 的 CSS 配色方案相关颜色
CSS 层叠层级(@layer)指南
CSS 玻璃效果生成器
使用 CSS 实现缩放动画：变换顺序很重要……有时
纯 CSS 构建的《我的世界(Minecraft)》
contrast-color()：在 CSS 中让浏览器给出对比色
使用 margin-trim，布局更简便
几乎不使用 CSS 的暗色模式
了解 CSS 是前端开发的精髓
发表回复 取消回复您的邮箱地址不会被公开。 必填项已用 * 标注
评论 *
显示名称 *
邮箱 *
网站