包裹在 flexbox 网格中的 flex 项目的相等边距空间

Posted 2023-03-07

【中文标题】包裹在 flexbox 网格中的 flex 项目的相等边距空间

【英文标题】：Equal margin space for flex items that wrap in flexbox grid

【发布时间】：2017-01-04 18:35:25

【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

排除媒体查询，也许这样的东西对你有用：jsfiddle.net/usLowo22/2

@Michael_B 不幸的是，这不起作用 - 列之间应该只有一个边距，而不是网格的左侧和右侧。

【参考方案1】：

这部分代码崩溃了

.gridColumn + .gridColumn 左边距：20px；

您应该尝试使用媒体查询并设置 margin-left: 0;在小屏幕上。

以上部分代码仍在工作，因为 flex-wrap 仅更改“第三列”的位置，该列之前仍然有“姐妹”，并且 margin-left 正在工作。

【参考方案2】：

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

.gridColumn 
    margin: $margin;

...然后被其容器偏移。

.grid 
    margin: -$margin;

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

Codepen example