将 Flexbox 信天翁真正应用于实践

如果您还没有看到，Heydon 发布了 一个相当巧妙的 flexbox 布局模式，从某种意义上说，它模拟了您可以使用容器查询通过强制元素在特定容器宽度下堆叠来实现的功能。我对此特别感兴趣，因为当时我正在解决一个小布局问题，我认为这可能是一个解决方案。让我们来看一看。

“广告双联”单元

我在这个网站的设计中使用了这些小型广告单元。我可以在网站上的各种位置插入它们。有时它们位于这样的列中

有时我将它们放在更像全宽环境的位置

有时它们位于由灵活的 CSS 网格创建的多列布局中。

因此，实际上，它们可以几乎是任何宽度。

但是，在某个点上，我希望广告堆叠起来。当它们在窄列中挤压时，它们不再并排显示，因此我希望它们改为上下排列，而不是左右排列。

我不关心屏幕有多宽，我关心的是这些广告所在的空间

我发现自己正在编写媒体查询以使这些广告从并排显示变为堆叠显示。我将在一个地方“修复”它，但又会在另一个地方破坏它，因为相同的媒体查询在其他上下文中不起作用。我需要一个该死的容器查询！

这就是 Heydon 的信天翁技术的魅力所在。我希望它们断开的点大约是 560px，所以我打算使用它。

转换

我之前已经使用 flexbox 来布局这些广告双联，因此唯一更改的是使其换行、插入花哨的 4 属性信天翁魔法，并调整边距处理，以便它不需要媒体查询来重置自身。

这是整个差异

它运行良好！

在 Firefox 开发者工具中查看

Victoria Wang 最近撰写了关于 设计 Firefox 开发者工具 Flexbox 检查器 的文章。我不得不打开 Firefox 开发者版进行检查！它非常酷！

对我来说，最酷的部分是它如何向您展示单个弹性项目如何达到其渲染大小。众所周知，这可能会变得有点古怪，因为很多事情都会影响它，例如 flex-basis、flex-grow、flex-shrink、max-width、min-width 等。

以下是信天翁技术显示的内容