坏掉的热水器和湿盒教会了我关于弹性盒的知识。

我们的热水器坏了。我走进车库，听到流水声。检查了家里的水龙头是否关闭，厕所没有运行，检查了外面。不，软管关闭。重新检查车库仍然听到水声，也许只是燃气加热水时的噪音。走过去，地板上有水。

热水器从顶部漏水。地板上和地毯上都有水坑。我们的地板上有一些旧地毯，所以它不是冷的裸露地板。现在有一条流穿过它。

地毯上存放的盒子里有水。盒子又湿又湿。一些内容也是如此。那些盒子里有几本平装书和一些侏罗纪公园的恐龙。这些书都被水损坏了，但大多数都会干掉。

这些盒子不再坚固，而是灵活。

这些盒子=弹性盒子。这给了我一个类似 LinkedIn 的点击诱饵标题和写有关 Flexbox 的借口。

弹性盒

在 CSS 中，flexbox 用于在行或列中水平或垂直排列项目。这些物品将弯曲以填充容器中的空间。

要开始使用 flex，请将 display:flex 添加到要保存子元素的父 Flex-container。

.flex-container {
  display: flex;
}

<flex-container>
  <div>



<p>Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.<br>
</p>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div>



<h2>
  
  
  Justify Content
</h2>

<p>So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.</p>

<ul>
<li>justify-content: center - Aligns items in the center of the container.</li>
<li>justify-content: space-around - Places space at the front and end of the container plus in between each item.</li>
<li>justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.</li>
<li>justify-content: flex-start (default) - Aligns at the start of the container.</li>
<li>justify-content: flex-end - Aligns at end of container.
</li>
</ul>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

此图片显示了盒子中央的书籍。

此图片显示了应用了空格的书籍。盒子的开头和结尾之间有间隙。

此图片显示了应用了空格的书籍。书籍被推到盒子的前面、中间、末端，之间有空间。

此图片显示了 Flex-Start。所有的书都被推到盒子的开头或左侧。

此图像显示了 Flex-End。所有的书都被推到盒子的末端或右侧。

结盟

使用align-items 垂直对齐父容器内的内容。

• align-items: flex-start - 在容器顶部对齐
• align-items: flex-end - 在容器底部对齐
• align-items: center - 将项目放在垂直中心
• align-items:基线 - 沿着每个项目内的基线对齐。
• align-items:stretch（默认）- 拉伸项目以填充容器的高度。

.flex-container {
  display: flex;
}

用 CSS 进行插图。这些图像是使用 CSS 制作的。

结论

这只是 Flexbox 的介绍，请查看 Wes Bos 的 What the Flex Box 或 MDN Web Docs 以获取更深入的解释。