Как подвинуть блок?

Question

[webe]

Есть блоки которые приплюснуты к правому краю. (flex-end)
Нужно сделать так, что бы красный и зеленый блок были приплюснуты к лквому краю.

Реально ли сделать без дополнительных оберток и float?
Возможно есть какая-то волшебная штука у флексбоксов..

https://jsfiddle.net/umc2ns3o/2/

Answer 1

[Camaro67]

Как вариант https://jsfiddle.net/umc2ns3o/7/
UPD: Вариант с псевдоэлементом и order https://jsfiddle.net/umc2ns3o/25/

Comments

[webe]

Camaro67 такой вариант тоже рассматривал, но так нельзя по условию :(
Забыл просто это указать.
в условии мы должны присвоить класс left двум кубикам.

паходу тут тоьлко float тут подойдет

[Camaro67]

webe, Обновил ответ, может тогда вариант с ::before и order подойдет.

Answer 2

[profesor08]

Только для красного задай margin-right:auto; это сдвинет и его, и зеленый влево.

Comments

[webe]

profesor08 , такой вариант тоже рассматривал, но так нельзя по условию :(
Забыл просто это указать.
в условии мы должны присвоить класс left двум кубикам.

паходу тут тоьлко float тут подойдет

[profesor08]

Значит цветные в один блок, белый в другой. Контейнеру justify-content: space-between;

[webe]

profesor08, ладно спасибо, просто я думал можно как-то без оберкти)
Сделал с float:left,
Думал что есть какая-то хитрость у флексов, но оказалось что нету.

Просто есть менюшка, и что-то типа конфигуратора меню куда передается каждому элементу меню LEFT или RIGHT и она двигается . если сделать через обертку, то не удет гибкости, мы зарранее не знаем что оборачивать.

[profesor08]

webe, Флексы решают проблему флоатов. Но надо подходить ответственнее к разработке. Но если возникает необходимость во флоатах, то значит что-то тут не так с подходом к реализации. В твоем случае напрашивается два контейнера. А так как это конфигуратор, то он и должен заниматься распихиванием пунктов меню и их организацией.