Flexbox Rand zwischen Boxen

Question

Ich weiß, Ränder zwischen flexboxes können automatisch eingestellt werden dank der align-content Eigenschaft, aber ich brauche es zu festen Rand in px festgelegt werden. Ich bin auf der Suche nach etwas ähnlich wie column-gap für Multi-Säulen.

Hier ist, was ich tun muss:

Hier ist der Raum zwischen 1,2,3 und 4,5 ist gleich, lassen Sie uns sagen 30px. Irgendeine Idee?

Answer 1

Eine Lösung könnte sein, Ränder und negative Ränder auf dem Container zu verwenden (was einen zusätzlichen Wrapper erfordert).

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