Flexbox margin between boxes

Question

I know margins between flexboxes can be set automatically thanks to the the align-content property, but I need it to be fixed margin set in px. I am looking for something similar to column-gap for multi-columns.

Here is what I need to do:

Here the space between 1,2,3 and 4,5 is equal, let’s say 30px. Any idea?

Answer 1

A solution could be to use margins, and negative margins on the container (which requires an extra wrapper).

Demo: 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;
}