Граница 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; 
}