回归基础：理解 Flexbox 的思维模型

GenAI LIVE! | 2025年6月4日

心智模型是人们用来与周围世界互动的外部现实的个人内部表征。它们由个人基于其独特的生活经历、感知和对世界的理解而构建。这些是我用来真正理解弹性盒的心智模型，我希望它们也能帮助你理解。

在本 flexbox 教程中，我们将尝试理解这些属性和主题

• 弯曲方向
• 内容对齐
• 对齐项目
• Flexbox 如何划分其子元素
• Flex 增长与宽度：100%

弯曲方向

属性有 4 个值，flex-direction分别是：

• 柱子
• 排
• 列反转
• 行反转

flexbox.help上有一个很棒的交互式插图，如果你想看看的话。以下是我复现的所有输出：

查看属性的值，这有点令人困惑，因为如果我们分配flex-direction: row它，它会被堆叠到右边。

但这里有一个理解和记住它的思维模型。我希望你记住，我们把元素放到flex-direction红色框里，而不是元素本身。根据这一点，我们基本上是在告诉红色框是单行的。可以把它想象成一个 Excel 电子表格。如果红色框是单行的，我们只能像 Excel 电子表格一样，把元素放在右侧。

知道了？

flex-direction: column基本上是一样的，你告诉红色框是电子表格中的单列，那么你只能在底部添加项目。

至于列反转和行反转，我想你已经掌握了，只需反转它即可。

内容对齐

对齐内容是用于在主轴上移动项目的属性。什么是主轴？主轴是我们使用 声明的方向flex-direction。例如，与上面的插图相同，当我们声明 时flex-direction: row，主轴是水平或左右方向的。

这是来自css-tricks的一个很棒的插图。

我用来记住这一点的心理模型是，对齐内容围绕主轴上的项目移动。

我认为该房产的价值在插图上表现得非常清楚。

对齐项目

这与 justify-content 属性相反，justify-content但align-items不具备 justify-content 属性的全部功能。对齐元素作用于横轴，这与主轴相反。

与 justify-content 心理模型相同，您只需要记住对齐项目在横轴上起作用。

Flexbox 如何划分子元素

我们有一个宽度为 500px 的红色框，以及 5 个宽度为 100px 的项目。

使用代码：

<div class='red-box'>
  <div class="item">
    <p>1</p>
  </div>
  <div class="item">
    <p>2</p>
  </div>
  <div class="item">
    <p>3</p>
  </div>
  <div class="item">
    <p>4</p>
  </div>
  <div class="item">
    <p>5</p>
  </div>
</div>

<style>
    .red-box {
        width: 500px;
        display: flex;
    }
    .item {
        width: 100px;
    }
</style> 

我喜欢创建一个心理模型，其中每个项目都向红色盒子（我们简称为Reddy）请求他们需要多少。

一开始，Reddy 的宽度为 500px，每个项目请求 100px。

Reddy: 500px

Request List:
1,2,3,4,5: 100px

因为 Reddy 有 500px 的空间，所以 Reddy 为每个项目提供所请求的数量，即 100px。

情况 1：当 Reddy 的宽度大于请求的量时

假设 Reddy 是 700px，Reddy 仍然只会给予物品所请求的数量，即 100px，并且有一些备用空间。

情况 2：当 Reddy 的宽度小于请求的量时

当Reddy的宽度有限时，Reddy必须根据请求比例给予每个项目合理的宽度。

那么，我们如何计算这个比例呢？这很简单，我们需要找到所有请求的比例，所以：

项目 1 : 项目 2 : 项目 3 : 项目 4 : 项目 5 = 1 : 1 : 1 : 1 : 1

所以，从比例上来说，雷迪会平等地给予每件物品。

Firefox Devtool 还提供了有关每个元素收缩程度的详细信息。

那么，雷迪会给每件物品多少呢？这些物品非常在意它们拥有的内容，它们不希望它们带来的内容被压缩成不存在。

此图演示了项目不会缩小到小于其内容尺寸（在本例中为 35px）。缩小到内容尺寸会导致溢出。

案例 3：不同的请求率

我们已经知道如果比例是 1:1:1:1:1，它会将项目缩小为相同的大小，让我们看看当项目请求不相同时它们是如何工作的。

Reddy: 700px

Request List:
1,3,5: 100px
2,4: 200px

让我们计算一下请求率：

Item Number = Ratio
1:2:3:4:5 = 100px:200px:100px:200px:100px
simplified,
1:2:3:4:5 = 1:2:1:2:1

因此，雷迪将根据该清单提供物品。

我们可以看到，当 Reddy 缩小到 350px 时，项目尺寸将为：50：100：50：100：50，与请求比例相同。

您还可以使用 强制项目不根据请求的宽度缩小flex-shrink: 0。Reddy.item会将该物品识别为 VIP 会员，无论如何都不会缩小它。

Flex 增长 vs 宽度 100%

使用width: 100%basically 将转换为容器的 100%，即 500px。这样一来，width: 100%将按照请求比例（即 1:5:1）进行计算。

但是，使用时flex-grow: 1，项目将不会按照请求比率进行计算，而是占用剩余的部分。

概括

好了，在我理解了 flexbox 的实际工作原理之后，使用 flexbox 就变得轻而易举了。我还有一篇关于如何在 flex 和 grid 之间进行选择的博客文章，你可以看看。

如果你们有任何问题请告诉我！

最初发布在我的个人网站上，在我的网站上可以找到更多博客文章和代码片段库，以便于访问🚀