html - 如何设置 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元素之间总是有间隙。

填充和边距可能不起作用，因为对齐

<-- 1st left in row和 last right in row -->不会举行。

Answer 1

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

基本思想是你有一个 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>

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

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