Как перенести элементы внутри flex-box?

Question

[Виталий]

Всем доброго.
Решил я обойтись без bootstrap,но застрял на сетке :(
как мне добится такого результата


а то пока у меня только так :(

Answer 1

[Сергей delphinpro]

flex-wrap: wrap;

Посмотрите как делают сетки на флексах. Есть отдельные проекты, чисто сетка. Есть в составе фремворков (тот же бутстрап 4 альфа)

Answer 2

[Александр Лямин]

В своё время мне очень помогла понять флекс эта игрулька.. flexboxfroggy.com

Ну допустим так:

.cont {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
        }
 .cont > div {
            width: 30%;
        }

<div class="cont ">
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
        <div>item</div>
    </div>

Comments

[Илья Морунов]

Отличная игра, спасибо ;)