如何在 CSS 中设置特定的 Flexbox 间隙

Question

我正在尝试实现一种flexbox只有一个flex-grow元素和周围有可变数量的较小元素的布局。我需要元素之间有一个固定宽度的间隙 - 正好一个像素。这是我想要的图表：

蓝色元素会增长以填充空间，但每个元素之间有 1px 的间隙。

如何创建这个固定宽度的间隙？

---

潜在的非 Flexbox 解决方案

我不知道如何在 中实现精确的 1 像素间隙flexbox，因此我尝试在grid布局中创建它。我遇到了一个不同的问题，即没有flex-grow网格子项的属性：

.box {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1px;
}
.big-element {
  // <- Need something similar to flex-grow for this element
}

Answer 1

CSS 规范最近进行了更新，gap除了 CSS 网格元素之外，还可以将属性应用于Flexbox 元素。所有主要浏览器的最新版本都支持此功能。有了这个gap属性，你只需添加一条column-gap: 1px规则就可以得到你想要的东西。