Heydon 的 神圣信天翁 是一种技术，用于在特定宽度时将元素的 行 转换为 列。 这是一个 指定 父级 宽度，而不是像媒体查询一样的 屏幕 宽度。 所以，就像容器查询（您知道，那些我们都想要的但还没有的东西）。
我以前用过它，尽管有人指出，仅在两个元素上使用它实际上并不必要，并且神圣信天翁在处理三个或更多元素时最为有用。
原始文章并没有涉及设置水平行元素的宽度（例如，其中一个元素需要比其他元素更大），但 后续文章 中包含 一个演示，显示可以使用 flex-grow 来做到这一点。 但肖卓佳指出，这并不是一个很好的系统。
问题是，很难为非堆叠列设置宽度，因为宽度被该技巧所占用。
Heydon 的一个建议是使用 flex-grow，问题是
1. 这是一个非常不直观的设置宽度方式 - 对于一个 3 列布局，你希望 1 列宽为 50%，你需要将 flex-grow 设置为 2.333
2. 你必须知道总列数，并相应地设置其他列的 flex-grow 值另一种方法是使用 min-width 和 max-width，如 codepen 所示。 我不相信
max-width: 100%是必要的，因为由于 flex-shrink，任何大于 100% 的值都会更改为 100%，所以实际上我们处理的是 min-width。这种方法的问题是我们必须为所有列设置 min-width，否则 flex-grow 会接管，并将列扩展到我们设置的 min-width 之外。
这一切都不好玩。
我四处寻找了一下，发现你可以鱼和熊掌兼得…
肖卓佳将之称为 不神圣的信天翁。 查看文章的 它如何工作？ 部分以了解出色的 CSS 技巧。 它涉及使用 max() 函数和带有回退的 CSS 自定义属性。 它仍然感觉非常符合神圣信天翁的精神，并且允许您使用像素值或比例在任何给定元素上设置宽度（通过 --width）。 此外，它支持间隙。