弹性容器中动态项目的间距答案

【问题标题】：Spacing of dynamic items in flex container弹性容器中动态项目的间距
【发布时间】：2021-07-06 21:03:18
【问题描述】：

我想知道在弹性容器中间隔动态项目的最佳方法是什么。容器中的项目可以删除或添加。我将容器设置为显示 flex 和 justify-content flex start，以便它们从左到右显示，这就是我希望它们显示的方式。包含中的每个项目都有间距的margin-right。这是最好的方法还是有更好的方法？

这是 jsfiddle：http://jsfiddle.net/39vsmyxo/49/

<div class = "container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

【问题讨论】：

查看justify-content。
期望的输出是什么？我假设您希望它们都在一条线上？当您不知道您要达到的目标时，就不可能知道“最佳”方法是什么。即便如此，“最佳”方法也可能是主观的。
我建议在容器中使用gap 属性，如果您不确定项目的数量可能是flex-wrap

标签： html css

【解决方案1】：

您可以使用gap: 16px;。它也适用于网格。我们还有justify-content: space-evenly; 和justify-content: space-between;。你可以试试看。

【讨论】：

【解决方案2】：

根据您的代码，似乎您希望弹性项目之间有一些差距，那么您可以使用gap 属性，但它可能不支持所有浏览器。所以你可以选择div，它的相邻元素是divlike

.container > div + div{
    margin-left: 1rem;
}

如果没有 flex-wrap，这将起作用

但是您将来可能会更改标记，因此您的样式表也应该在这种情况下工作，因此您可以在此处使用通用选择器 * 来选择任何类型的直接子代。

.container > * + *{
    margin-left: 1rem;
}

.container {
  display: flex;
  background-color: aquamarine;
}

.container > * + * {
  margin-left: 1rem;
}

<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 class="item">6</div>
  <div class="item">7</div>
</div>

【讨论】：