如何设置项目之间的空间样式？

Question

是否可以在flex中的项目之间设置空格样式？

情况：

1. 我有一种桌子/桌子
2. 我不希望物品增长（flex-grow: 0）
3. 我不要space-between个项目
4. 如果剩余空间不足，则下一项下降到下一行

示例：

小提琴：

https://jsfiddle.net/t245o0vr/21/

所需效果： 我想最后在这些间隔中添加一个边框底部。您认为有可能吗？有什么想法吗？

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-bottom: 0;
  
  max-width: 470px; /* for the sake of example */
}

.item {
  display: inline-flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

<div class="container">
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
</div>

Answer 1

此解决方案不是基于flex（我也想知道如何使用任何灵活的规则来解决它），但是它可以工作。

不是在元素上添加边框，而是在每个项目上添加绝对定位的&:after伪元素，并在父对象中隐藏溢出

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-bottom: 0;
  max-width: 470px; /* for the sake of example */
  overflow: hidden; /* <------- new */
}

.item {
  display: inline-flex;
  padding: 10px;
  /* border-bottom: 1px solid #ccc;   <---- removed */
  position: relative; /* <------- new */
}
.item:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw; /* Bigger enough :P */
  border-bottom: 1px solid #ccc;
}

<div class="container">
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
</div>

Answer 2

我会考虑使用梯度的另一种方法。诀窍是要有一个渐变，使其每行重复出现，以覆盖将出现的每条新行。您只需要知道基于line-height和padding

的行的高度

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  line-height:1.2em;
  background:
    repeating-linear-gradient(to bottom, 
      transparent 0,transparent calc(1.2em + 20px),
      #ccc calc(1.2em + 20px),#ccc calc(1.2em + 21px));
  max-width: 470px; /* for the sake of example */
}

.item {
  display: inline-flex;
  padding: 10px;
}

<div class="container">
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
  <div class="item">
    itemA
  </div>
  <div class="item">
    itemBitemB
  </div>
  <div class="item">
    itemCCCC
  </div>
</div>