如何设置 flexbox 项之间的最小空间量？答案

【问题标题】：How can I set a minimum amount of space between flexbox items?如何设置 flexbox 项之间的最小空间量？
【发布时间】：2016-01-04 04:47:29
【问题描述】：

鉴于此 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 --> 将不成立。

【问题讨论】：

可能最快的方式：.container margin-right: -10px .container div margin-right: 10px

标签： html css flexbox

【解决方案1】：

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

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

哪个 flex-shrink 是：

flex-shrink：一个数字，指定该项目相对于其他弹性项目将收缩多少

所以，例如，您为 gap div 设置了这个 css 代码：

flex: 1 0 10px;

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

【讨论】：

我不认为我想做的事是可能的。我试过你的suggestion，但是当浏览器窗口很窄时，这会导致右侧出现一个间隙div，并且每行中最后一项的对齐方式不再在右侧。
如果你想让第一个 div 在左边，最后一个在右边，你必须通过将你的 flex 宽度设置为百分比值，以及 `flex-flow: row nowrap ;` 将所有元素放在一行中。

【解决方案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>

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

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

【讨论】：

我会设置.item:nth-child(n+2){margin-left:2em} 来避免容器的负边距并将间距减半
@venimus 这应该是一个答案，而不是评论。这是完美的。
@Darkproduct 目标是允许回流（基于可用空间的每行元素的动态数量）。如果您在更大的窗口中打开我的示例，那么您将在第一“行”中看到更多项目。我相信指定第 n 个孩子只有在您知道每个“行”中的项目数时才有效。
@venimus 你的评论为我解决了这个问题。谢谢！如前所述，您应该将其作为答案。

【解决方案3】：

使用百分比设置 flex-basis 也可以解决问题。然后之间的最小空间也将以百分比表示。例如，对于 3 个元素， flex: 0 0 30% 将允许在元素之间分配固定的 10% 空间。有 6 个元素，flex: 0 0 15% 等等。

【讨论】：

【解决方案4】：

问这个问题已经过去了几天，但我想如果有人过去并遇到同样的问题，我应该添加我的解决方案。

我建议使用 calc、width 和 media 来解决这个问题。是的，这有点工作，但在我看来这是一个视觉上干净的解决方案。

.main{
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
}
.main > div{
  width: 100%;
  height: 125px;
  border: 1px solid red;
}

@media (min-width: 576px) {
  .main > div{
    width: calc(100% / 2 - 5px);
    margin-bottom: 5px;
  }
}
@media (min-width: 992px) {
  .main > div{
    width: calc(100% / 3 - 5px);
  }
}
@media (min-width: 1140px) {
  .main > div{
    width: calc(100% / 6 - 5px);
    margin-bottom: 0;
  }
}

<div class="main">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

对于所需的断点，我计算我希望 div 使用的宽度并减去我希望它们拥有的空间。

我希望这对某人有所帮助，并且我的解释是可以理解的。

问候。

【讨论】：