如何设置项目之间的空间？答案

【问题标题】：How to style space between items?如何设置项目之间的空间？
【发布时间】：2019-05-21 04:39:26
【问题描述】：

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

案例场景：

我有一种表格/网格
我不希望项目增长 (flex-grow: 0)
我不想要space-between 项目
如果没有足够的剩余空间，下一个项目会落到下一行

例子：

小提琴：

想要的效果： 我想在最后的那些间距中添加一个边框底部。你觉得有可能吗？有什么想法吗？

.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>

【问题讨论】：

棘手的问题。以下是一些想法：stackoverflow.com/q/47882924/3597276
嗯......如果没有元素，它就不能有边框......你不能为不存在的行设置样式。
justify-content: space-between; on .container?
@ToniMichelCaubet OP 声明 “我不希望项目之间有空格”
抱歉您编辑了问题。那么问题是边框没有填满容器？

标签： css flexbox css-grid

【解决方案1】：

我会考虑另一种使用渐变的方式。诀窍是要有一个渐变，每行都会重复以覆盖将出现的每条新行。您只需要知道基于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>

【讨论】：

【解决方案2】：

这个解决方案不是基于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>

【讨论】：

是的……这也是我最初的想法。 +1
很酷的解决方案！你能解释一下width: 600%; depending on items.length吗？注意：项目宽度不固定，都有适合内容的宽度。
任何非常大的宽度都可以...我建议 100vw
100% 不够吗？ :p 会尝试并尽快标记为正确
作为一个魅力。谢谢各位！