html - 如何使用 flex-start 但有 margin space-around 会提供？

Question

当使用 space-around 作为 justify-content 的参数时，它将在容器内均匀地间隔元素。我想要的是所有元素都在左侧开始(flex-start)但具有与space-around相同的边距会提供。

我认为这说明了问题:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  border: 1px solid red;
}

.item {
  flex: 0 0 16%; /*6 items per line leaving some for margin*/
  border: 1px solid black;
  box-sizing: border-box;
}

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

我想要的是第二行换行并占用前两列。我知道我可以在 .item 类上指定一个填充并将 flex 属性设置为 flex-start 但我不能总是 100% 确定填充的大小应该是因为它针对多个设备进行缩放。

可以这样证明:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  border: 1px solid red;
}

.item {
  flex: 0 0 16%; /*6 items per line leaving some for padding*/
  border: 1px solid black;
  box-sizing: border-box;
  margin-right: 0.66%
}

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

红色边框之间的元素整体间距不正确，在不知 Prop 体值的情况下，我不知道如何设置它。

Answer 1

如前所述，可以添加 ghost elements填充最后一行，但在这种情况下，不需要用未使用的元素污染标记，只需使用 nth-child 选择器并简单地计算所有元素所需的左边距，但每行的第一个。

计算是通过从父级的全宽(100% -)中去掉元素宽度(16% * 6))的总和，然后除以留空量 /5)

.item:not(:nth-child(6n+1)) 将选择除第 6 个以外的所有元素，从第 1 个开始(例如第 1、第 7、第 13 等)。

如果每行中的元素计数会发生变化，请使用媒体查询来调整 6n+1 选择器和计算值。

堆栈片段

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid red;
}

.item {
  flex: 0 0 16%; /*6 items per line leaving some for margin*/
  border: 1px solid black;
  box-sizing: border-box;
}

.item:not(:nth-child(6n+1)) {
  margin-left: calc( (100% - (16% * 6)) / 5 );          /*  added  */
}

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