盒子之间的Flexbox边距

Question

我知道flexboxes之间的边距可以通过属性自动设置align-content,但我需要它在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;
}