Как сделать такую раскладку на Флексах?

Question

[maralov]

подскажите как сделать такую раскладку на флексах, при условие если новый item повиться добавлялся в конец (row-revers не спас"

Comments

[lUser L]

Не могу представить ситуацию, когда это может понадобиться.

[Dima Polos]

В чем суть раскладки? Что сначала вниз добавляются, потом наверх?

[maralov]

Dima Polos, чудаки добавляються постами из админки вордпресс в цикле. а во втором ряду справа там картинка с верхнего блока

[maralov]

как-то так

[Dima Polos]

maralov, там где справа круг - там что-то левое должно отображаться, типа какого-то баннера, да? так понял?

[maralov]

Dima Polos, да там в зависимости от секции будет иконка меняться. (команда специалистов, команда врачей и так далее)

[maralov]

старый добрый float left и right сработал бы...

[Dima Polos]

maralov, а что если к блокам добавить псевдоэлемент, размером под блок в этом месте, во флекс-контейнере задать расположение справа налево, и там before окажется аккурат в том месте где круг, а блок поверх него уже позишеном, или отрицательными маржинами втянуть попробовать?

[Ankhena]

Вы можете добавить на место круга пустой элемент либо псевдоэлемент с order.
Либо использовать float или grid.

[maralov]

Dima Polos, с маржинами я тоже дмал и решил нижний ряд "затягивать" наверх отрицательным маржином.
что-то такое в голове крутиться не могу сообразить как вставить третим псевдо-элементом с шириной 50%

[Dima Polos]

maralov, ордер?;)

[Dima Polos]

maralov, потом правда на брейкпоинтах переопределить ордер возможно придется, но таких манипуляций максимум сколько пальцев на одной руке.

[maralov]

Dima Polos, спасибо добрый человек. получилось все)

[maralov]

Dima Polos, может еще подкинешь идею как этот блок лучше сделать?
у меня идея такая - этот блок не помещать в общий контейнер, а задать ему калком право-лево паддинг %
и это блок с кнопкой уже в нем позиционировать абсолютом...ширину только как универсальнее не прдумалось

[Dima Polos]

maralov, можно блок с этой скругленной штукой объеденить в один блок с командой медиков, команду медиков с текстом закинуть в контейнер и задать им паддин справа, а эту штуку посчитать в процентах от ширины макета и вставить вправо. Короче, надо только посчитать все размеры правильно, и будет ок, но заморочная штука.

Рад, что помог) Напишу ответ, что можно псевдоэлементом решить)

[maralov]

Dima Polos, спасибо еще)

[Dima Polos]

maralov, успехов!:)

Answer 1

[Dima Polos]

Псевдоэлемент + ордер, как вариант - подробности в комментах под вопросом)