Какие свойства задать flex элементам?

Question

[Александр Рыбаков]

Добрый день!
Существует каталог продуктов — он флексовый с flex-wrap:wrap;
Внутри сидят сами продукты.
Вопрос такой: какие свойства задать flex-элементам, чтобы у них был максимальный размер 350px; минимальный размер 250px; и пока уменьшается сам каталог в ширине, flex-элементы сначала уменьшались до минимальной ширины, затем переносились, и там увеличивались до максимальной ширины.
Такое возможно вообще?

Answer 1

[iBird Rose]

https://jsfiddle.net/esuyo7ct/

Comments

[Александр Рыбаков]

А если плюс ко всему максимальное количество элементов в строке 4?

[Dima Polos]

Александр Рыбаков, юзайте сетку

[iBird Rose]

Александр Рыбаков, тогда используйте блок, который будет width: 100%; и настраивайте его скрытие и показ через media.
К примеру вот как бутстрап делает https://getbootstrap.com/docs/4.1/layout/grid/#equ...

Answer 2

[WIking-2-0]

Вот еще хороший способ на grid'ах
https://habr.com/en/company/edison/blog/344878/

Answer 3

[Сергей Горячев]

Если знать количество в строке, можно через width 100% / кол-во элементов.
Хотя у Розовой птички вариант лучше по мне)