css - 将类 "collapse"添加到 flex 网格会导致间距不均匀

Question

所以，我正在创建一个基于 flexbox 的网格系统，一切都进行得很顺利。我的网格的基础是:

<div class="row">
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
</div>

在我的 CSS 中:

.row {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
}

.column {
    padding: 10px;
    flex: 1 1 0%;
}

本质上，这使得列非常流畅，并且它们会收缩/增长以填充所有可用空间。这对我来说很棒，因为我需要在各种元素中使用它，而我无法为每个元素完全自定义网格。但是，我遇到了一个小“问题”。我打算创建一个名为“.collapse”的类，这样我就可以折叠左/右填充以使一些列紧挨着放在一起(例如:如果我想要一个带有背景颜色的 div(通过向column=> .column .green) 刷新到下一列中的图像)。但是，与上面的行/列相比，间距完全不正常。

<div class="row">
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
</div>

example screenshot here 正如您在我的小示例模型中看到的那样，它们确实有点排成一行，但是左右边距已经“减少”了。有什么聪明的方法吗？我尝试将“左/右页边距”添加到第一个类型和最后一个类型，但这只是有点老套，因为然后在两者之间添加的任何内容都开始出现奇怪的对齐问题。

Answer 1

对于这种网格系统，您通常不鼓励直接在网格单元格上使用结构样式，它允许您这样做:

.row {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin-left: -10px;
}

.column {
  flex: 1 0 0;
  padding-left: 10px;
}

.collapse           { margin-left: 0; }
.collapse > .column { padding-left: 0; }

.red,
.purple {
  padding: 10px;
  margin-bottom: 10px;
}

.red    { background-color: red; }
.purple { background-color: purple; }

<div class="row">
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
</div>

<div class="row collapse">
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
  
  <div class="column">
    <div class="purple">
      <p>Column</p>
    </div>
  </div>
  
  <div class="column">
    <div class="red">
      <p>Column</p>
    </div>
  </div>
</div>

这种方法在外端不使用边距，我觉得这样更方便。

值得注意的是，随着 CSS Grid Layout 的出现，这种操作系统不再那么有用了，但你已经有了它。

附带说明一下，0 始终是 0，它永远不需要单位。