如何在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

您可以使用保证金/填充来创建此差距：

.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可以将with open('out.csv', encoding='utf-8', mode='a') as f: for index, row in df.iterrows(): df.loc[index, 'words'], df.loc[index, 'count'] = transcribe(df.loc[index, 'text']) df.loc[index:index].to_csv(f, index=False, header=f.tell()==0) 属性应用于CSS网格元素之外的flexbox元素。并非所有浏览器都支持此功能（just Firefox at time of writing；将其添加到Chrome的错误跟踪器页面为here），但这很快就可以实现，只需添加gap规则即可。

Answer 3

快速修改所需间隙的厚度并将颜色设置为透明，例如 边框：.75rem 实心透明；