盒子之间的弹性盒子边距答案

【问题标题】：Flexbox margin between boxes盒子之间的弹性盒子边距
【发布时间】：2014-11-27 23:54:03
【问题描述】：

我知道弹性框之间的边距可以自动设置，这要归功于align-content 属性，但我需要它以像素为单位设置固定边距。我正在寻找类似于column-gap 的多列内容。

这是我需要做的：

这里 1,2,3 和 4,5 之间的空间是相等的，比如说 30px。有什么想法吗？

【问题讨论】：

你看过：stackoverflow.com/questions/20626685/… 吗？
谢谢，但我需要它在多行上工作，列数未定义
看看我的回答，也许会有所帮助。 stackoverflow.com/a/41033768/1204902

标签： css flexbox margins

【解决方案1】：

一种解决方案是在容器上使用边距和负边距（这需要额外的包装器）。

演示： http://jsbin.com/gozup/1/edit?html,css,output

HTML

<wrapper>
  <container>
    <column>1</column>
  </container>
</wrapper>

CSS

wrapper {
  overflow: hidden;
  width: 250px;
}
container {
  display: flex;
  flex-wrap: wrap;
  margin: -25px;
}
column {
  flex: 0 1 50px;
  height: 50px;
  margin: 25px;
}

【讨论】：