本文翻译自《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方向