Можно ли сделать flex-элементы «столбцами», но без указания ширины?

Question

[Северное Сияние]

Есть два представления, в котором flex-элементы должны занимать 33%, т.е. делиться по 3 элемента в ряд, в другом представлении - по два элемента в ряд, по 50%. Ну типа товары в ИМ.

Вот болванка - https://jsfiddle.net/w8kzdn6m/

Можно ли как-то сделать универсальный css, что бы избежать двух классов с указанием ширины элементов?

Comments

[Rustam Bainazarov]

Нет, без класса модификатора нельзя обойтись. Как браузер узнает, в каком случае в две, а в каком три колонки делать?

Answer 1

[Brad9aga]

на чистом флекс нет, для этого придуманы сетки, или ручные медиазапросы

Answer 2

[Kudis]

Вот вариант без класса, но с media-выражением
https://jsfiddle.net/gcr4j3o8/
просто изменяйте ширину контейнера с результатом и увидите, как после 900px всё выстаривается 3 в ряд, а до 2 в ряд.

Comments

[SpeakeazyYT1]

Привет, помоги пожалуйста с вопросом -> Почему не выбираются элементы не принадлежащие ни к одному разделу из инфоблока при критериях SECTION_ACTIVE и SECTION_GLOBAL_ACTIVE в фильтре Bitrix?