Как так расположить блоки с помощью flex?

Question

[del993788]

Здравствуйте. Пытался сделать через order, но появляются какие-то странные отступы.
Результат должен быть таким

<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>

.container {
display:flex;
}
.container div {background:blue}

.box1 {width:200px;height:55px;margin-bottom:25px}
.box2 {width:200px;height:55px;margin-bottom:25px}
.box3 {width:200px;height:135px;margin-bottom:25px}
.box4 {width:170px;height:50px}
.box5 {width:170px;height:50px}

Comments

[Islam Ibakaev]

закинь в codepen и дай ссылку

[mrlag]

1,2 блок, сделай им обёртку.
4,5 тоже оберни.
И все встанет. flex-direction, justify-content, сам додумай:)

[Виталий Першин]

mrlag, Еще бы не помешало использовать wrap. И думаю можно даже без обертки, если использовать column

[mrlag]

Виталий, 1,2 в любом случае надо обернуть, иначе не встанет.
Column? Кому?
Тут row, flex-wrap: wrap; (для контейнера)
И можно попробовать не оборачивать 4,5 блоки.

[del993788]

mrlag, я не хотел трогать html, но да: обертка этих двух блоков решает проблему. Спасибо!

[Виталий Першин]

mrlag, Вам бы тоже не помешало флексы подучить:

[del993788]

Виталий, а... нет. вы не правы. нельзя трогать порядок div.

[Виталий Першин]

qqignatqq, Вы не поверите, но и это не проблема:

[del993788]

Виталий, ну тогда я снимаю шляпу и прошу добавить свой ответ в "ответ", а в не комментарий

[del993788]

Виталий, я был близок к этому варианту. Просто не рассматривал margin-left. У меня из-за justify-content: space-between; всё сыпалось

[Виталий Першин]

qqignatqq, Я как-то не планировал делать, просто хотел навести на мысль)

[Виталий Першин]

qqignatqq, Да, тут нюанс в том что justify-content: space-between; будет работать в другом направлении, поэтому margin auto

[mrlag]

Виталий,
ну как сказать, вариант, но не работоспособный.
переполнение контента не будет работать, если отпустим фиксированную высоту, и сделаем min-height, то вся сетка поломается.
И что проще? добавить 1 обертку, или играться с отступами и с перспективой сломаной сетки?

[Виталий Першин]

mrlag, Если говорить о подходе, тогда гриды будут более актуальны оберток, так что не надо притягивать за уши проблемы. Вы сказали что оборачивать нужно в любом случае, я доказал что это не так и в рамках поставленной задачи все более чем работоспособно.

[mrlag]

Ок, ок, работает, не спорю!
Но что проще?) И главное, работоспособней:)
Человек в свой проект возьмёт данный вариант, а потом аукнется:)
Ладно, дискуссия пустая.

[Виталий Першин]

mrlag,

Но что проще?) И главное, работоспособней:)

Гриды

Человек в свой проект возьмёт данный вариант, а потом аукнется:)

У человека есть задача, я предоставил решение. Более того я без проблем могу представить пару вариантов где такой подход будет более чем самодостаточен. Кроме того это не просто решение, а возможность понять на практике, что возможно сделать и как. Вы вот своим ограниченным знанием flex не смогли догадаться, что можно применить column, так что пусть остальные тоже живут в неведении?

Это как вчера в теме спрашивали, как сделать чтобы элементы обтекали блок и переносились на новую строку. Люди уже о float забыли, а вы упрекаете пример раскрывающий потенциал флексов.

Answer 1

[Виталий Першин]