理解 Flexbox 与 Cats：第一部分基础知识

每个人都喜欢猫咪，对吧？它们是毛茸茸的可爱小家伙，喜欢砸东西，而且不听话。在本系列中，我们假设它们会突然听从所有给出的神奇指令“”。display: flex;“用猫咪理解弹性盒”将以“”来类比，cats and boxes讲解 CSS 盒子模型、弹性盒定位等概念，并提供一些关于使用容器的宝贵技巧。请记住，本系列假设读者已经对 HTML 和 CSS 有了一些基本的了解。

在第一部分中，我们将主要帮助读者彻底理解弹性盒在多个容器中的定位机制。本部分主要面向两类人：一类是从未真正理解过弹性盒的人，另一类是喜欢阅读如何创造性地运用类比来连接两个看似毫不相关的事物的人。

“Flexbox 与猫”比赛

• 第 1 部分：Flexbox 基础知识
  • 适合初学者的 CSS 盒子模型和 div 定位介绍
• 第二部分：用“盒子”思考
  • 一篇文章描述了如何在使用提供的设计时识别容器（“div”）以及如何实现所需的定位。
• 第 3 部分：高级 Flexbox 和 CSS
  • 涵盖从使用弹性盒子布局打造响应式网站到如何创建自己的设计等所有内容。我们还将介绍本系列所学知识的实际应用。

《猫和盒子》简介

想象一下，你突然发现自己要照顾三只小猫。你看到你的公寓因为这些精力充沛的小猫到处乱跑，还在不该抓挠的地方乱抓乱抓，慢慢变得乱糟糟的，你开始感到恐慌。有什么办法可以解决这一切混乱吗？🤔

如果你考虑过限制猫咪的空间，那你猜对了！就像现实生活中一样，我们必须先设置一个元素box（也称为<div>元素），然后才能cats在其中放置任何内容（例如图片、文本、列表等）。先把小猫放在地上，然后再在它们上面加一个盒子，这种做法毫无意义，所以在使用弹性盒子时也尽量避免这样做！

设置默认框

记住这一点，让我们设置一下 HTML。现在需要注意的是，cats（3 张图片）已经被放置在一个box（class 为 的 div cat-box）中。你可能会想，为什么它们都集中在一个地方？好吧，现在是时候介绍一些“小猫逻辑”了！

你看——猫咪的本能反应就是喜欢拥抱。尤其考虑到这些小猫咪几秒钟前才把整间公寓弄坏，现在又被安置在一个陌生的环境中。它们不知道该如何应对，所以总是紧紧地依偎在左上角，互相取暖，感到安全。

Flexbox 简介

猫咪通常认为自己很尊贵，所以为了让它们服从，我们必须给display: flex;小猫所在的盒子下达一个命令。有人可能会想：“为什么不给每只猫单独下达呢？” 嗯，这是因为盒子限制了猫咪的活动空间，使其拥有更高的权威！而猫咪——作为骄傲的贵族——只会听从更高权威的指令。如果你试图display: flex;给任何一只猫咪的图像添加内容，都不会有任何效果；它们非常固执（稍后会详细介绍why，这与……有关thinking outside of the box！此处双关）。

display flex 的作用是让猫咪图片排成一行，并开始监听其他命令。正如你刚才所想，它们原本就是排成一行的，所以唯一能注意到的区别就是图片之间缺少了空间。

现在，假设一位完美主义的朋友来到你的公寓，想要把所有的小猫和盒子都按照房间的中心对齐。我们需要在两个方向上对齐它们：水平（主轴）和垂直（横轴）。以下是轴线的视觉呈现：

align-items: center;首先，让我们将它们连接到 ，使其沿y 轴对齐.cat-box。然后，让我们通过添加 ，使它们在 x 轴上正确定位。justify-content: center;

此时，这些 CSS 属性被添加到.cat-box：

  显示：弹性；
  对齐项目：居中；
  对齐内容：居中；

你可能已经注意到了，即使猫咪现在都摆放在了中央，装它们的盒子仍然不在它该在的位置。这位追求完美的朋友会感到不安，不再信任你，不再把如此“重要”的责任交给你，开始扰乱猫咪自己的位置。

这是他尝试通过body附加我们刚刚附加的相同属性来对齐 CSS上的所有容器所得到的结果.cat-box

他还没有意识到的是，所有家具和其他物品，比如任天堂 Switch 和 MacBook Pro，也突然被放置在了公寓的中央，这绝对是一种不受欢迎的行为！通常认为，将 flexbox 属性附加到 body 上是一种不好的做法。

因此，为了让小猫和盒子都对齐到屏幕中心，我们必须创建另一个<div>带有 类的盒子.outer-container，并将其包裹在现有内容周围。为什么我们需要这样做？让我们通过一个例子来深入探讨原因！

看看 dev.to 主页上的这个组件。右侧展示了当前使用了多少个容器（盒子）来实现它的功能。注意它们是如何嵌套的——也就是说，它们彼此嵌套。类似于荧光笔的浅色用于表示每个容器的内部填充。

所有 flexbox 操作始终只影响一层，这意味着它只会影响最近的子容器。例如，紫色容器只能操作三个内部容器，但不能操作它们内部的任何<h>元素<a>。而深蓝色容器可以通过将 flexbox 附加到自身来对其锚点进行操作（注意，当您想要操作容器内部的元素时， flexboxdisplay: flex会被附加到容器上）。

如果你还没注意到这个模式：我们想对齐小猫 => 向它们最近的外部盒子发出命令；想要操作同一个盒子 => 在它外面创建一个容器来包裹所有内容。这样你就无法从盒子外面控制小猫了。.outer-container因此，请记住“跳出思维定式”这个短语，因为如果你想操作某些元素，你需要找到最近的外部容器，以便为其分配弹性盒子属性。

记住这一点，深蓝色容器中所有锚点之所以定位到一列，是因为它们继承了flex-direction: column;紫色父容器的 flexbox 属性。看看如果将紫色容器上的 flexbox 方向改为行，这个 dev.to 组件会发生什么。你还能认出没有线条和高亮的相同盒子吗？😉

回到猫咪的视觉示例，现在应该明白为什么我们需要一个额外的包装容器了：否则就无法控制容纳猫咪的盒子了。剩下要做的就是<div>在 HTML 中添加一个额外的容器，为其添加一个类名，声明 flexbox 居中定位，并在该类名上添加一个限定的大小。有一些方法可以让容器根据其内部内容的拉伸和挤压来改变其大小，但我们将在本系列的第二部分和第三部分中更深入地探讨。您可以在 CodePen 上查看完成的代码：

我们可以和其他人一起玩得很开心justify-content，下面是使用这个 gif 来直观地展示它是如何改变事物的：

结论

希望这个类比cats and boxes能帮助你更好地理解弹性盒的概念。所有术语都经过了简化，重点在于理解的重要性。此外，我很想听听你对第一部分的看法：哪些地方做得不错，哪些地方可以改进？请记住，这是我写的第一篇文章！这里有一个包含本文 Markdown 代码的仓库，欢迎你创建任何 Pull Request！
https://github.com/kefimochi/Flexbox-with-cats/blob/master/Part%201/Basics.md