Как сделать идеальные столбцы с одинаковым заполнением с помощью flexbox

Я хочу реплицировать столбцы с равным заполнением с помощью flexbox, они должны быть как на этом изображении:

enter image description here

Более светлая серая коробка невидима, прокладка между ящиками должна быть одинаковой, но боковые коробки не должны иметь прокладки на стороне, которая не касается какой-либо коробки. Раньше я бы сделал что-то вроде:

HTML

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

.box{
    width: 32%;
    margin-bottom: 2%;
}

.box:nth-of-type(3n - 1){
    margin-left: 2%;
    margin-right: 2%;
}

И затем, чтобы сделать их отзывчивыми, я бы добавил точку останова и удалил левый и правый поля, например, установил ширину до 49%, а затем добавил маржу слева с 2% к nth-of-type (2n).

Как я могу реплицировать это с помощью flexbox? Заранее спасибо!

0
13 дек. '16 в 16:10
источник поделиться

Посмотрите другие вопросы по меткам или Задайте вопрос