完整的 Flexbox CSS 指南

正在学习如何使用 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

<div id="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

这段 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

<div id="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

我们还为 .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

<div id="container">
    <div class="child child-1">1</div>
    <div class="child child-2">2</div>
    <div class="child child-3">3</div>
</div>

为每个子元素添加另一个类(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

<div id="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
</div>

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现已与全球最常用的浏览器完全兼容。因此您可以放心使用。

你也许感兴趣的：

• 交互式演示教程教会你精通掌握 Flexbox 布局
• 使用 light-dark() 的 CSS 配色方案相关颜色
• CSS 层叠层级(@layer)指南
• CSS 玻璃效果生成器
• 使用 CSS 实现缩放动画：变换顺序很重要……有时
• 纯 CSS 构建的《我的世界(Minecraft)》
• contrast-color()：在 CSS 中让浏览器给出对比色
• 使用 margin-trim，布局更简便
• 几乎不使用 CSS 的暗色模式
• 了解 CSS 是前端开发的精髓