Как с помощью flex распредилить кнопки как на картинке?

Question

[Станислав]

Есть 4 button расположенных в div блоке

<div class="flex">
 <button>1</button>
 <button>2</button>
 <button>3</button>
 <button>4</button>
</div>

Нужно сделать как на картинке


Понятно что можно 3 первых в блок отдельный запихать, но можно ли сделать без этого?

Answer 1

[Rsa97]

Answer 2

[Wispik]

Comments

[alexalexes]

Всегда мучал вопрос, а можно ли во flex контейнере выдавить элемент на новую строку без фиксации избыточной ширины элемента (как будто br понаставить до/после)?

[Wispik]

alexalexes, насколько я знаю, нельзя

[mrFleshka]

alexalexes, создать элемент с нулевой высотой и 100% шириной и поставить его до переносимого блока

[alexalexes]

mrFleshka, костыльно слишком, нарушается чистота содержимого контейнера.
Хотелось бы обойтись свойствами или, максимум, вставкой псевдоэлементов.
PS: Тогда нужно просто иметь ввиду, если контейнер предполагает перенос элементов на новую строку, то на конкретно флекс элементы не нужно навешивать графически видимые свойства, элемент должен отвечать только за позиционирование, но при этом быть полностью прозрачен по графике. Графические свойства должно нести содержимое элемента.

[mrFleshka]

alexalexes, не костыльно, а единственный вариант
Ну или не юзать флексы