Как создать такую сетку при помощи флексов?

Question

[StickPunk]

Нужно чтобы верхний средний блок опустился вниз. Как это можно сделать на флексах?

<div class="parent">
        <div class="item short"></div>
        <div class="item long"></div>
        <div class="item short"></div>
        <div class="item long"></div>
        <div class="item short"></div>
        <div class="item long"></div>
    </div>

.item {
        width: 50px;
        height: 50px;
        background-color: aqua;
        border: 2px solid black;
    }
    .item.long {
        height: 100px;
    }
    .parent {
        width: 100%;
        max-width: 175px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

Comments

[sergski]

По 3 item обернуть в div c flex

[Алексей]

Не надо делать на флексах то, для чего оно не предназначены, сетка это грид

[Иван]

align-item: self кажись подойдет для среднего блока. Но вообще лучше вам сделать набросок кодом, скинуть в codepen и вставить сюда, так удобнее всем

Answer 1

[Антон Романков]

Лучше такое на гридах делать. Если флексы, то проще сделать 2 ряда по 3 элемента, но я так понимаю, что это не совсем то, что вам надо.