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

【问题标题】：Equal margin space for flex items that wrap in flexbox grid包裹在 flexbox 网格中的 flex 项目的相等边距空间
【发布时间】：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 不幸的是，这不起作用 - 列之间应该只有一个边距，而不是网格的左侧和右侧。

标签： html css responsive-design flexbox

【解决方案1】：

这部分代码崩溃了

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

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

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

【讨论】：

【解决方案2】：

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

.gridColumn {
    margin: $margin;
}

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

.grid {
    margin: -$margin;
}

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

Codepen example

【讨论】：