我前几天通过 Michelle Barker 的报道提到了 这个，但在这里我会 链接到 官方公告。最主要的是，我们将获得 flexbox 的 gap，这意味着
.flex-parent {
display: flex;
gap: 1rem;
}
.flex-child {
flex: 1;
}这很棒，因为过去在 flex 项目之间添加间距一直很困难。我们有 justify-content: space-between，这有时很不错，但这不允许多次明确地告诉 flex 容器你想要多少间距。为此，我们通常使用 margin，但这意味着要避免根据边距的方向设置第一个或最后一个元素的边距——这很烦人会变得很复杂。
我们在 CSS Grid 中有 gap，它好多了。在 flexbox 中拥有它很棒。
但它会变得奇怪一会儿。Safari 还不支持它（稳定的 Chrome 也不支持），因此我们不能只是把它放到那里，并期望它能与 flexbox 一起使用。但是，我们不应该能够使用 @supports 查询吗？
/* Nope, sorry. This "works" but it doesn't
actually tell you if it works in *flexbox* or not.
This works in grid in most browsers now, so it will pass. */
@supports (gap: 1rem) {
.flex-parent {
gap: 1rem;
}
}它变得奇怪是因为 grid-gap 被放弃了，只保留了 gap。我相信 grid-gap 将永远被支持，因为这些事情通常就是这样，但我们鼓励使用 gap。因此，你可能会说 gap 有点过载，但这应该会随着时间的推移（一年？）而解决。column-gap 现在也变成了 gap 的事实让事情变得更复杂了一点。gap 有一大堆工作要做。
尽管过载，我还是支持这种变化。更简单的思维模型对长期来说很重要，而且目前还没有什么东西会挑战 CSS 在浏览器中的样式功能。我敢打赌，我两岁的女儿在她的一生中会写一些 CSS。