css - 需要避免与 justify-content 之间的间距：子 div flex wrap 后最后一个完整行的空格

Question

所以我设计了一个使用 flex-box 属性的组件。这是它的结构

.units {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    height: auto;
}

.unit {
    height: 5.55rem;
    width: 5.8rem;
    background: #28a74520;
    border-radius: 5px;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}

我的理解是，由于units具有justify-contentto的属性space-between，它始终保持它，但是，在unit最后一行中子 div 数量较少的情况下，之间的间距变得尴尬和夸张。我宁愿有最后一行flex-start或没有空间的东西，我该如何实现？

当前预览： 所需输出：

标签： csssass

Answer 1

有2个解决方案：

1-添加一个额外的框，如下所示，并将最后一个框的可见性设置为隐藏：

<div class="unit"></div>
.unit:last-child {
  visibility: hidden;
}

2- 使用 CSS 网格：

.unit-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;            
}

如果盒子是动态的，那么 flexbox 对于这种情况可能不是一个好的选择。