Flexbox margin between fields

Question

I know that the fields between flexboxes can be set automatically thanks to the align-content property, but I need this to be a fixed field set to px. I am looking for something similar to column-gap for multiple columns.

Here is what I need to do:

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

Answer 1

The solution may be to use fields and negative fields on the container (which requires an additional shell).

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