我正在尝试使用 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>
现在,我想只在列的之间设置边距(而不是在网格的两侧),这在调整屏幕大小时也应该正确运行。有人知道实现这一目标的方法吗?
最佳答案
您可以为网格项添加边距...
.gridColumn {
margin: $margin;
}
... 然后由其容器抵消。
.grid {
margin: -$margin;
}
为避免溢出,您可以将 overflow-x: hidden
应用于 body
。
关于html - 包裹在 flexbox 网格中的 flex 元素的等边距空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39194219/