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

Question

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

蓝色元素增长以填充 space，但每个元素之间有 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

您可以使用 margin/padding 来创建此间隙：

.container {
  border: 1px solid;
  display: flex;
  height: 20px;
  margin:10px 0;
  padding: 1px 0 1px 1px;
}

.e {
  flex: 1;
  margin-right: 1px;
  background: red;
}

.b {
  width: 200px;
  margin-right: 1px;
  background: green;
}

<div class="container">
  <div class="e"></div>
  <div class="e"></div>
  <div class="b"></div>
</div>
<div class="container">
  <div class="e"></div>
  <div class="e"></div>
  <div class="b"></div>
  <div class="e"></div>
  <div class="b"></div>
</div>
<div class="container">
  <div class="e"></div>
  <div class="e"></div>
  <div class="e"></div>
  <div class="b"></div>
  <div class="e"></div>
  <div class="e"></div>
  <div class="e"></div>
  <div class="e"></div>
</div>

Answer 2

CSS 规格最近 updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported on the latest versions of all major browsers。使用 gap 属性，您只需添加 column-gap: 1px 规则即可获得您想要的内容。

Answer 3

快速破解添加一个实心钻孔所需间隙的厚度并将颜色设置为透明，例如边框：.75rem 实心透明；

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

How to set a specific flexbox gap in CSS

html

css

grid-layout

flexbox

潜在的非 flexbox 解决方案