css - 3 列布局中 3*n 项之间的填充是否相等？

Question

我想使用 flex 属性实现 3 列布局，如下所示:

item-----item-----item

其中 ----- 表示每个元素之间的填充。现在，问题是虽然这些规则:

.col-3-grid .grid-item {
    padding: 0 10px 0 0;
}

.col-3-grid .grid-item:nth-of-type(2n) {
    padding: 0 5px 0 5px;
}

.col-3-grid .grid-item:nth-of-type(3n) {
    padding: 0 0 0 10px;
}

为布局的第一行工作，如果我有 5 个 .grid-item 或 4 个，甚至超过 3 个，它就会中断，看起来像这样:

item--item-----item

空间不均匀，因为我的规则无法识别“好吧，它是行尾，重置规则”，因为它应用了 .col-3-grid .grid-item:nth- of-type(2n) 规则添加到我的 4th 元素，根据代码，它是一个公正的设备。

但是我怎样才能告诉它应用正确的填充呢？

Answer 1

由于您使用的是 flexbox ，我建议您使用 justify-content: space-between 属性。它会针对任意数量的 .grid-items 进行 self 调整。

.col-3-grid,
.col-4-grid,
.col-5-grid {
  width: 100vw;
  height: 20vh;
  background: #ccc;
  display: flex;
  justify-content: space-between;
}

.grid-item {
  width: 15vw;
  height: 100%;
  background: #000;
  color: #fff;
}

<div class="col-3-grid">
  <div class="grid-item">Block1</div>
  <div class="grid-item">Block2</div>
  <div class="grid-item">Block3</div>
</div>
<br>
<div class="col-4-grid">
  <div class="grid-item">Block1</div>
  <div class="grid-item">Block2</div>
  <div class="grid-item">Block3</div>
  <div class="grid-item">Block4</div>
</div>
<br>
<div class="col-5-grid">
  <div class="grid-item">Block1</div>
  <div class="grid-item">Block2</div>
  <div class="grid-item">Block3</div>
  <div class="grid-item">Block4</div>
  <div class="grid-item">Block5</div>
</div>