Question

我有一个很好定义的网格系统：

.col-3-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.col-3-grid .grid-item {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 32%;
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
    max-width: 33.333333%;
}

当一行中有3个元素时看起来很好：

Elements look good when they're 3.

但是当不是第一行2或任何其他行多次或3的项目数量不均匀时，就会发生这种情况：

Elements look bad when they're 5, 8 or so.

在第4和第6项之间，存在差距。这是预期的，但这种方法非常优雅，我真的不想放弃justify-content: flex-start，因为那时我需要为每个元素添加填充，并且它们永远不会与其他元素对齐。 / p>

简而言之，我想保留space-between，但要让每一行的项目排成一行。

Answer 1

我认为不可能使用justify-content:space-between。但是你可以使用保证金到每个中间元素，即第2，第5，第8，第11，所以......

.col-3-grid .grid-item:nth-child(3n+2) {
  margin: 0 2%;
}

无需使用justify-content:space-between

＆＃13;

.col-3-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.col-3-grid .grid-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 32%;
  -ms-flex: 0 0 32%;
  flex: 0 0 32%;
  max-width: 33.333333%;
  height: 30px;
  background: gray;
  margin-bottom: 10px;
}

.col-3-grid .grid-item:nth-child(3n+2) {
  margin: 0 2%;
}

＆＃13;

<div class="col-3-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

＆＃13;

我如何利用对齐内容：空间 - 自动间距与不均匀的元素数量？

1 个答案: