Можно ли с помощью flexbox так расставить блоки?

Question

[Александр]

Можно ли с помощью flexbox так расставить блоки?


Ширина блоков фиксированная. Расстояние между первыми двумя и последним должна быть произвольной (зависеть от ширины контейнера).

Answer 1

[Сергей delphinpro]

C бухты-барахты - нет, штатные способы отсутствуют.
Но, как всегда, на выручку приходит смекалка, порождающая аццкие хаки =)

https://jsfiddle.net/m2r8ndk7/

PS. На самом деле, ничего страшного тут нет. Вполне приличный метод расположить блоки =)

Comments

[Danila]

https://jsfiddle.net/m2r8ndk7/1/

[Александр]

Данила: хм, очень интересно. А почему оно так работает? Мне не совсем очевидно.

[Danila]

LordGuard: с флексами марджин авто работает иначе, он старается заполнить всё свободное пространство внешним отступом в заданном направлении

[Александр]

Данила: хм, это обозначено в спецификации? В будущем это не изменится?

[Danila]

LordGuard: https://www.w3.org/TR/css-flexbox-1/#item-margins

[Александр]

Данила: огромное спасибо)

[Сергей delphinpro]

хех =) полезно иногда почитать спеку

Answer 2

[Konstantin Kudelko]

оберни первые два в контейнер и дай родителю
justify-content: space-between;