本文翻译自《An Interactive Guide to Flexbox》。

Flexbox（弹性框）是一种非常强大的布局模式。当我们真正理解它的工作原理时，我们可以构建自动响应的动态布局，并根据需要重新排列。

例如，看看这个：

（译者注：案例请看原文）

此案例很大程度上受到Adam Argyle的出色的“4种布局，1种价格”的启发。它不使用媒体/容器查询。它没有设置任意断点，而是使用流畅的原则来创建无缝流动的布局。 以下是此案例的CSS：

form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.name {
  flex-grow: 1;
  flex-basis: 160px;
}
.email {
  flex-grow: 3;
  flex-basis: 200px;
}
button {
  flex-grow: 1;
  flex-basis: 80px;
}

我记得我曾经遇到过这样的演示，当时完全不知所措。我知道 Flexbox 的基础知识，但这似乎是绝对的魔法！

在这篇博文中，我想完善您对 Flexbox 的心理模型。我们将通过了解每个属性来建立对 Flexbox 算法如何工作的直觉。无论您是 CSS 初学者，还是已经使用 Flexbox 多年，我敢打赌您都会学到很多东西！

让我们开始吧！

内容警告

我在本教程后面会做一个与食物相关的比喻。

Flexbox简介

CSS由许多不同的布局算法组成，布局算法的正式名称是“布局模式(layout mode)”。每种布局模式都是CSS中的一种小语言。默认布局模式是流式布局(Flow layout)，但我们可以通过更改父容器上的display属性来选择使用Flexbox布局模式：

（译者注：案例请看原文）

当我们将display属性的值设置为flex时，我们会创建一个“flex格式化上下文”。这意味着，所有子元素都将根据Flexbox布局算法进行定位。

每种布局算法都旨在解决特定问题。默认的“流式”布局旨在创建数字文档，它本质上是Microsoft Word的布局算法。标题和段落以块的形式垂直堆叠，而文本、链接和图像等内容则不显眼地位于这些块内。

那么，Flexbox解决了什么问题？Flexbox就是将一组条目（元素）排列成一行或一列，并赋予我们对这些项目的分布和对齐方式的极大控制权。顾名思义，Flexbox就是“灵活性”。我们可以控制条目是增大还是缩小，如何分配额外的空间等等。

它仍然有意义吗？

你可能想知道：既然CSS Grid在现代浏览器中得到了很好的支持，那么Flexbox不是过时了吗？

CSS Grid是一种很棒的布局模式，但它解决的问题与Flexbox不同。我们应该学习这两种布局模式，并使用正确的工具来完成工作。

当涉及到以垂直或水平列表排列项目的动态、流畅的UI时，Flexbox仍然占据主导地位。我们将在本指南中看到一个示例，即解构的煎饼，这无法通过CSS Grid轻松实现。

老实说，作为一个熟悉CSS Grid和Flexbox的人，我仍然发现自己经常使用Flexbox！

Flex方向

如上所述，Flexbox主要是控制行或列中元素的分布。默认情况下，条目将并排堆叠在一行中，但我们可以使用flex-direction属性翻转到一列：

（译者注：案例请看原文）

使用flex-direction: row时，主轴水平运行，从左到右。当我们翻转为flex-direction: column时，主轴垂直运行，从上到下。

在Flexbox中，一切都基于主轴。算法不关心垂直或水平，甚至行或列。所有规则都围绕此主轴和垂直延伸的横轴构建。

这非常酷。当我们学习Flexbox的规则时，我们可以无缝地从水平布局切换到垂直布局。所有规则都会自动适应。此功能是Flexbox布局模式所独有的。

默认情况下，子元素将根据以下2条规则进行定位：

• 主轴(primary axis)：子元素将聚集在容器的起始处。
• 横轴(cross axis)：子元素将伸展以填满整个容器。

以下是这些规则的快速可视化：

在Flexbox中，我们决定主轴是水平还是垂直。这是所有Flexbox计算的根源。

“主轴”和“横轴”不如称它们为“主轴”和“副轴”。

对齐

我们可以使用justify-content属性来改变子元素沿主轴的分布方式：

（译者注：案例请看原文）

当谈到主轴时，我们通常不会考虑对齐单个子项元素。相反，我们关心的是整个（子项元素）组的分布。

我们可以将所有项目集中在一个特定位置（使用flex-start、center和flex-end），也可以将它们分开（使用space-between、space-around和space-evenly）。

对于副轴，情况略有不同。我们使用align-items属性：

（译者注：案例请看原文）