Flexbox 和自动边距的奇妙魔法

在前端开发中，我经常会遇到一些自己不知道的事情。 我可能知道要搜索什么 CSS，但我完全不知道如何使用它或正确的语法是什么。 不知何故，在我的脑海中，似乎有一个完全空的档案柜，当我试图查找某样东西时，我只找到了一张几乎无法辨认的便签。

像这样的一个主题（我多少知道但从未真正理解的领域）是如何自动边距和 Flexbox 相互作用的。

例如，看看这个例子

.parent {
  display: flex
}

.child {
  margin: auto;
}

这又做了什么？ 我好像记得可以用它做很多很棒的事情，而本周早些时候，我在读了一篇 Sam Provenza 之前写的一篇很棒的文章后，对它们有了一点印象，文章中展示了 自动边距和 Flexbox 如何协同工作。 但即使读完那篇文章，我还是不太理解这个概念，直到我开始自己制作演示，它才开始变得清晰起来。

在文章中，Sam 描述了 margin: auto 如何影响 Flex 项目：

如果您将自动边距应用于 Flex 项目，该项目将自动扩展其指定的边距，以占用 Flex 容器中的额外空间，具体取决于应用自动边距的方向。

让我们稍微分析一下，假设我们有一个简单的父级 div，其中包含一个子级 div：

<div class="parent">
  <div class="child"></div>
</div>

假设我们使用以下 CSS 来为这些 div 样式化：

.parent {
  display: flex;
  height: 400px;
  background-color: #222;
}

.child {
  background-color: red;
  width: 100px;
  height: 100px;
}

结果看起来像这样：

查看 Pen margin-auto: #1 by Robin Rendle (@robinrendle) on CodePen.

当我们像这样向 .child 元素添加 margin-left: auto 时：

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-left: auto;
}

……然后我们将看到：

查看 Pen margin-auto: #2 by Robin Rendle (@robinrendle) on CodePen.

很奇怪，对吧？ 左边距正在推挤父级，以便子级嵌套在最右边的角落。 但当我们将所有边距设置为 auto 时，它变得更加奇怪：

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}

查看 Pen margin-auto: #3 by Robin Rendle (@robinrendle) on CodePen.

就像我们正在使用一个 流行的居中技巧，通过将 justify-content 和 align-items 设置为 center，因为子级决定在父级的中心水平和垂直地休息。 同样，如果我们将 margin-left 和 margin-top 设置为 auto，那么我们可以让 Flex 项目将自己推入父级的右下角：

查看 Pen margin-auto: #4 by Robin Rendle (@robinrendle) on CodePen.

当 Sam 说，“该项目将自动扩展其指定的边距，以占用 Flex 容器中的额外空间”时，我那空空如也的档案柜大脑的解读方式是这样的：

在 Flex 子级上设置 margin 属性将把子级推离该方向。 将 margin-left 设置为 auto，子级将向右推。 将 margin-top 设置为 auto，子级将向下推。

在我写下这些之后，现在对我来说听起来是如此明显，几乎是愚蠢的，但有时这就是让一个新概念留在我的大而愚蠢的海绵脑中的方法。

为什么知道这一点很重要？ 好吧，我认为在某些情况下，justify-self 或 align-self 可能无法在使用自动边距的布局中让你完全得到想要的结果，从而让你拥有额外的灵活性来微调事物。 我在网上看到的很多演示，包括 Sam 为她的原始文章制作的演示，似乎大部分都是为了在菜单中对齐导航项目。 因此，将菜单中的一个项目推到 Flex 父级的底部或最右边，在这些场景中确实很有用。

无论如何，我认为这个奇怪的技巧很重要，以备不时之需。