如何设置 flexbox 项目之间的最小间距？

Question

给定这个 CSS：

 div.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid blue;
}
div.container div {
  width: 200px;
  border: 1px solid gray;
  display: inline-block;
  text-align: center;
}

根据需要，此布局将每行中的第一个项目左对齐，最后一个项目右对齐。

随着浏览器窗口变窄，分布的 div 元素将靠得更近，直到它们 接触，此时它们被重新排列在一个额外的行上。同样，每行的第一个 div 左对齐，最后一个右对齐，中间有空格。

有什么方法可以设置 最小间距，以便内部 div 元素之间始终有间隙。

_padding 和 margin 可能不起作用_，因为对齐

<-- 1st left in row 和 last right in row --> 将不成立。

原文由 Jim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以添加另一个具有 flex 样式的 div 来保持内部 div 之间所需的间隙。对于该间隙的最小宽度，请使用此属性（如 W3Schools.com 中所述）：

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

哪个 flex-shrink 是：

flex-shrink：一个数字，指定项目相对于其余灵活项目的收缩量

因此，例如，您为间隙 div 设置此 css 代码：

 flex: 1 0 10px;

这告诉 gap div 将有 10px 宽度，并且会相对于其余的灵活项目增长，但不会收缩。所以屏幕最窄处的最小宽度为 10px。

原文由 PiML 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

晚会有点晚了，但我遇到了同样的问题。我解决它的方法可能不适用于所有人，但这里适用于可以使用它的人。

基本思想是你有一个最小差距 x 。您将每个项目的左右边距设置为 x/2 ，以便项目之间的距离为 x （边距 + 边距）。然后将所有项目包装在一个容器中，左右边距为 -x/2 。这将隐藏每行边缘项目的边距。

这是一个工作示例：

 .box {
  border: 1px solid black;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -1em;
}

.item {
  display: flex;
  border: 1px solid grey;
  padding: 1em;
  width: 20%;
  margin: 0 1em;
}

 <div class="box">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

overflow-x: hidden; on .box 是为了防止由于边距溢出而在某些浏览器中出现水平滚动条。

如果您希望间隙始终保持一致并且只有一个项目的行使该项目跨越整行，那么您可以将 flex-grow: 1 添加到 .item 。

原文由 bygrace 发布，翻译遵循 CC BY-SA 3.0 许可协议