盒子之间的Flexbox边距

Question

我知道由于align-content属性，可以自动设置flexbox之间的边距，但我需要在px中设置固定边距。我正在为多列寻找与column-gap类似的东西。

以下是我需要做的事情：

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

Answer 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;
}