时间戳

首页 > 解决方案 > 将类“折叠”添加到 flex 网格会创建不均匀的间距

css - 将类“折叠”添加到 flex 网格会创建不均匀的间距

问题描述

所以，我正在创建一个基于 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>

此处的示例屏幕截图 正如您在我的小示例模型中看到的那样，它们确实排成一列，但左右边距“减少了”。有什么聪明的方法可以解决这个问题吗？我尝试将“左/右边距”添加到第一个类型和最后一个类型，但这只是有点棘手，因为在两者之间添加的任何内容都开始出现奇怪的对齐问题。

标签： cssflexboxgrid

解决方案

对于这种网格系统，您通常不鼓励直接在网格单元上使用结构样式，它可以让您执行以下操作：

.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 的出现，这种 os 系统不再那么有用了，但是你已经有了。

附带说明一下，0 始终为 0，它从不需要单位。

推荐阅读