Question

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

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

到目前为止我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

.gridColumn {
    margin: $margin;
}

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

.grid {
    margin: -$margin;
}

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

Codepen example

Answer 2

这部分代码崩溃了

.gridColumn + .gridColumn { margin-left：20px; }

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

上面的代码部分仍然有效，因为flex-wrap只改变＆＃34;第三列＆＃34;的位置，该列仍然有＆＃34;姐妹＆＃34;之前和margin-left正在运作。

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

2 个答案: