html - 如何在 CSS 中设置特定的 flexbox 间隙

Question

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

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

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

---

潜在的非 flexbox 解决方案

我不知道如何在 flexbox 中实现精确的 1 像素间隙，所以我试图在 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 规范最近是updated除了 CSS 网格元素之外，还可以将 gap 属性应用于 flexbox 元素。 This feature is supported on the latest versions of all major browsers .使用 gap 属性，您只需添加 column-gap: 1px 规则即可获得所需内容。