本文翻译自《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属性：
（译者注：案例请看原文）
有趣的是…使用align-items，我们有一些与justify-content相同的选项，但并没有完美的重叠。
为什么它们不共享相同的选项？我们很快就会解开这个谜团，但首先，我需要分享另一个对齐属性：align-self。
与justify-content和align-items不同，align-self应用于子元素，而不是容器。它允许我们沿副轴更改特定子元素的对齐方式：
（译者注：案例请看原文）
align-self具有与align-items相同的所有值。事实上，它们改变的是完全相同的东西。align-items是一种语法糖，是一种方便的简写，可以自动同时设置所有子元素的在副轴上的对齐方式。
没有justify-self属性。要理解为什么没有，我们需要深入研究Flexbox算法。
内容 vs 条目（子元素）
因此，根据我们目前所学的知识，Flexbox可能看起来相当随意。为什么名字是justify-content和align-items，而不是justify-items或align-content？
还有上文那个问题，为什么有align-items属性，而没有justify-self属性？
这些问题涉及到Flexbox最重要的和最容易被误解的事情之一。为了帮助解释，我想用一个比喻来说明。
在Flexbox中，条目（子元素）沿主轴分布。默认情况下，它们并排整齐排列。我可以画一条水平直线，将所有子元素串起来，就像烤肉串一样：
但是，交叉轴（副轴）有所不同。垂直直线只会与其中一个子项相交。它不像烤肉串，而更像一组鸡尾酒香肠：
这里有一个显著的区别。对于鸡尾酒香肠，每条都可以沿着签子移动，而不会干扰任何其他香肠：
相比之下，由于我们的主轴将每个子元素串在一起，因此单个元素无法沿着轴移动，而不会碰到其兄弟元素！尝试将中间部分左右拖动：
这是主轴和副轴之间的根本区别。当我们谈论副轴上的对齐时，每个条目都可以做任何它想做的事情。然而，在主轴上，我们只能考虑如何整组分配。
这就是为什么没有justify-self属性。中间部分设置justify-self: flex-start意味着什么？那个位置已经有另一个条目了！
考虑到所有这些知识背景，让我们对讨论的所有4个术语进行适当的定义：
- justify — 沿主轴定位某物。
- align — 沿交叉轴（副轴）定位某物。
- content — 一组可以排列的“东西”。
- items — 可以单独设置位置的单个条目。
因此：我们有justify-content属性来控制组沿主轴的排列，我们有align-items属性来沿副轴单独定位每个条目。这是我们用来管理Flexbox布局的两个主要属性。
没有justify-items属性的原因与没有justify-self属性的原因相同；当谈到主轴时，我们必须将所有条目（子元素）视为一个组。
那么align-content属性呢？实际上，它确实存在于Flexbox中！稍后我们将在讨论flex-wrap属性时介绍它。
假尺寸(hypothetical size)
让我们来谈谈我对Flexbox最令人大开眼界的认识之一。假设我有以下 CSS：
.item {
width: 2000px;
}一个理性的人看到这个可能会说：“好吧，所以我们会得到一个宽度为2000像素的项目”。但这总是正确的吗？让我们测试一下：
（译者注：案例请看原文）
这很有趣，不是吗？两个条目应用了完全相同的CSS。它们各自的宽度都是：2000px。然而，第一个条目比第二个条目宽得多！
不同之处在于布局模式。第一个条目使用流式布局进行渲染，在流式布局中，宽度是一个硬性约束。当我们设置宽度：2000px时，我们将得到一个2000像素宽的元素，即使它必须冲破视口的一侧。
然而，在Flexbox中，width属性的实现方式不同。它更像是一种建议，而不是硬性约束。规范对此有一个名称：假设尺寸。它是元素在完美的乌托邦世界中的尺寸，当没有任何阻碍时。
唉，事情很少这么简单。在这种情况下，限制因素是父元素没有空间容纳2000px宽的子元素。因此，子元素的尺寸会缩小以适应它。
这是Flexbox理念的核心部分。事物是流动的、弹性的，可以适应世界的限制。
算法的输入
我们倾向于将CSS语言视为属性的集合，但我认为这是错误的思维模型(mental model)。正如我们所见，width属性的行为会根据所使用的布局模式而有所不同！
相反，我喜欢将CSS视为布局模式的集合。每种布局模式都是一个可以实现或重新定义每个CSS属性的算法。我们通过CSS声明（键/值对）提供一个算法，然后该算法决定如何使用它们。
换句话说，我们编写的CSS是这些算法的输入，就像传递给函数的参数一样。如果我们想真正熟悉CSS，仅仅学习CSS属性是不够的；我们必须了解算法如何使用这些属性。（译者注：这就是很多CSS新手说“CSS很难学”、“CSS属性的功能不正交”的原因了，因为学习和使用CSS的思维模式不正确）
增长与收缩
因此，我们已经看到Flexbox算法具有一些内建的弹性，具有假尺寸。但要真正了解Flexbox的弹性，我们需要讨论3个属性：flex-grow、flex-shrink和flex-basis。 让我们看看这些属性。
flex-basis
我承认：很长一段时间以来，我都不太明白flex-basis到底是什么。
简单来说：在Flex行中，flex-basis的作用与width相同。在Flex列中，flex-basis的作用与height相同。
我们已经知道，Flexbox中的所有内容都与主轴和副轴挂钩。例如，justify-content将沿主轴分布子元素，无论主轴是水平还是垂直，其工作方式都完全相同。
但是 width和height不遵循这条规则！width总是会影响水平尺寸。当我们将flex-direction从row翻转为column时，它不会突然变成height。
因此，Flexbox的作者创建了一个通用的“尺寸”属性，称为flex-basis。它类似于width或height，但与其他所有东西一样与主轴挂钩。它允许我们在主轴方向上设置元素的假尺寸，无论主轴方向是水平还是垂直。
在这里尝试一下。每个子元素都被赋予了flex-basis: 50px，但你可以调整第一个子元素：
（译者注：案例请看原文）
就像我们在width方面看到的一样，flex-basis更多的是一种建议尺寸，而不是硬性约束。在某个时候，空间不足以让所有元素都按照指定的大小放置，因此它们必须做出妥协，以避免溢出。
不完全一样
通常，我们可以在Flex行（Flex row）中互换使用width和flex-basis，但也有一些例外。例如，width属性对图像等替换元素的影响与flex-basis不同。此外，width可以将元素缩小到其最小尺寸以下，而flex-basis则不能。
这远远超出了这篇博文的范围，但我想提一下，因为你可能偶尔会遇到两个属性具有不同效果的边界情况。
flex-grow
默认情况下，Flex上下文中的元素将沿主轴缩小到其最小舒适尺寸。这通常会产生容器元素的额外的空间。
我们可以使用flex-grow属性来指定如何使用该空间：
（译者注：案例请看原文）
flex-grow的默认值是0，这意味着flex-grow是可选的。如果我们想让某个子元素占用容器中的所有额外空间，我们需要明确地告诉它。
如果多个子元素设置了flex-grow会怎么样？在这种情况下，额外空间会根据子元素的flex-grow的值按比例分配给它们。
我认为用可视化方式解释会更容易。尝试增加/减少每个子元素的flex-grow的值：
（译者注：案例请看原文）
例如，第一个子元素想要4个单位的额外空间，而第二个子元素想要1个单位。这意味着单位总数是5 (=4 + 1)。每个子元素都会按比例获得该额外空间的份额（第一个子元素获得4/5的额外空间，第二个子元素获得1/5的额外空间）。
flex-shrink
在目前我们看到的大多数示例中，我们都有额外的空间可供使用。但如果我们的子元素对于容器来说太大了怎么办？
让我们测试一下。尝试缩小容器的宽度以查看会发生什么：
（译者注：案例请看原文）
很有趣，对吧？两个子元素都会缩小，但它们会按比例缩小。第一个子元素的宽度始终是第二个子元素的2倍。
温馨提醒，flex-basis的作用与width相同。我们将使用flex-basis，因为它是常规用法，但如果使用width，我们也会得到完全相同的结果！
flex-basis和width设定元素的假设尺寸。Flexbox算法可能会将元素缩小到低于它所需尺寸，但默认情况下，它们将始终一起缩放，从而保持两个元素之间的比例。
现在，如果我们不想让元素按比例缩小怎么办？这就是flex-shrink属性的作用所在。
花几分钟看看这个演示。看看你是否能弄清楚这里发生了什么。我们将在下面进行探索。
（译者注：案例请看原文）
我们有两个子元素，每个元素的假设尺寸为250px。容器的宽度至少需要500px，才能容纳假设尺寸的这些子元素。
假设我们将容器缩小到400px。好吧，我们无法将价值500px的内容塞进400px的袋子里！我们缺口是100px。我们的元素将需要放弃总共100px，才能适合。
flex-shrink属性让我们决定如何支付这笔差额。
和flex-grow一样，它是一个比例。默认情况下，两个子元素都有flex-shrink: 1，因此每个子元素都支付缺口的1/2。它们各自放弃50px，其实际尺寸从250px缩小到200px。
现在，假设我们将第一个子元素的flex-shrink设置为3：
我们总共缺口100px。通常情况下，每个子元素都会支付1/2，但是由于我们对flex-shrink进行了调整，第一个元素最终支付3/4（75px），第二个元素支付1/4（25px）。
请注意，绝对值并不重要，重要的是比率。如果两个子元素都具有flex-shrink: 1，则每个子元素将支付总缺口的1/2。如果两个子元素都设置为flex-shrink: 1000，则每个子元素将支付总缺口的1000/2000。无论哪种方式，结果都是一样的。
收缩和比例
在我们查看的示例中，两个Flex子元素具有相同的假设尺寸(250px)。在确定如何收缩它们时，我们可以使用flex-shrink进行专门计算。
不过，正如我们之前所看到的，收缩算法也会尝试保持兄弟元素之间的比例。如果第一个子元素的大小是第二个的2倍，那么第一个子元素的收缩幅度会更大。
因此，完整的计算涉及每个子元素的flex-shrink值和相对大小。
不久前，我对flex-shrink有了新的认识：我们可以将其视为flex-grow的“反面”。它们是同一枚硬币的两面：
- flex-grow控制当子元素小于其容器时如何分配额外空间。
- flex-shrink控制当子元素大于其容器时如何移除空间。
这意味着同一时刻，这两个属性中只有一个可以处于激活的状态。如果有多余的空间，flex-shrink不会产生任何效果，因为子元素不需要缩小。如果子元素对于其容器来说太大，flex-grow不会产生任何效果，因为没有多余的空间可以分配。
我喜欢把它想象成两个不同的世界。你要么在地球上，要么在相反的世界。每个世界都有自己的规则。
防止收缩
有时，我们不希望某些Flex子元素收缩。
我经常在SVG图标和形状中发现这种情况。让我们看一个简化的示例：
（译者注：案例请看原文）