Как сделать такю сетку на flex без js?

Question

[trepux]

Добрый день. Подскажите, можно ли сделать такого плана сетку на флексах без использования js?


Сайт с адаптивом, поэтому зеленый блок должен изменять ширину и не отваливаться. Важно, что бы все оранжевые блоки шли подряд внутри одного родителя (без разбиения их на блоки).
Мне в голову приходят решения только через флоаты, а хотелось бы на флексах.

Answer 1

[Andrej Sharapov]

на флексах скорее всего без разбиения не получится, попробуйте гриды

Comments

[Михаил Р.]

На флексах придется сделать 3 контейнера:
1. Первые 16 желтых блоков.
2. Зеленый блок.
3. Остальные 30 желтых блоков.

[Антон Спирин]

Mike Ro, есть одна загвоздка:

Важно, что бы все оранжевые блоки шли подряд внутри одного родителя (без разбиения их на блоки).

[Михаил Р.]

Антон Спирин, тогда:
1. Оранжевые блоки помещаем в своего родителя.
2. Зеленому блоку задаем float: left;

Меня за такое исполнение, начальство закидает тапками... =)

А вообще подобное лучше реализовывать на CSS Grid layot. Поддержка браузерами их конечно меньше, чем flexBox, но она растет...

Answer 2

[siarheisiarhei]

css селектор укажи блок

.flex-item:nth-child(2) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

и, крути как хош....

Answer 3

[Амир Алимжанов]

Только Grid layout поможет или если всё таки js, то masonry.js