Flexbox margine tra le scatole

Question

So che i margini tra le caselle possono essere impostati automaticamente grazie alla proprietà align-content, ma ho bisogno che sia impostato il margine fisso in px. Sto cercando qualcosa di simile a column-gap per multi-colonne.

Ecco quello che devo fare:

Qui lo spazio tra 1,2,3 e 4,5 è pari, diciamo 30px. Qualche idea?

Answer 1

Una soluzione potrebbe essere l'utilizzo di margini e margini negativi sul contenitore (che richiede un ulteriore 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; 
}