html - 包裹在 flexbox 网格中的 flex 元素的等边距空间

Question

我正在尝试使用 flexbox 创建响应式网格:

• 在大屏幕上，一行应该是三列
• 在较小的屏幕上，只有两行或一行

到目前为止我的代码:

.grid {
  display: flex;
  flex-wrap: wrap;
}
.gridColumn {
  flex: 1 1 0px;
  background-color: lightblue;
  min-width: 200px;
}

<div class="grid">
  <div class="gridColumn">
    <p>first column</p>
  </div>
  <div class="gridColumn">
    <p>second column</p>
  </div>
  <div class="gridColumn">
    <p>third column</p>
  </div>
</div>

现在，我想只在列的之间设置边距(而不是在网格的两侧)，这在调整屏幕大小时也应该正确运行。有人知道实现这一目标的方法吗？

Answer 1

您可以为网格项添加边距...

.gridColumn {
    margin: $margin;
}

... 然后由其容器抵消。

.grid {
    margin: -$margin;
}

为避免溢出，您可以将 overflow-x: hidden 应用于 body。

Codepen example