Элементы flex-box сжимаются даже с заданной шириной. Это нормальное поведение?

Question

[Senseich]

Начал изучать flex-box. Подскажите, это нормально когда у элементов задана ширина, но при уменьшении экрана блоки всё равно сжимаются. Так и должно быть у флексов? Если да, то как сделать чтобы флекс не сжимался , а перескакивал на следующую строчку? Вот пример, в котором я это увидел: https://jsfiddle.net/api/post/library/pure/

Comments

[Сергей delphinpro]

flex-shrink: 0 для блока, который не должен сжиматься

Рекомендую к прочтению: css-live.ru/articles/vizualnoe-rukovodstvo-po-svoj...

Answer 1

[Иван Минаков]

Для того, что бы перескакивали, нужно добавить свойство flex-wrap: wrap;

Answer 2

[robodead]

flex-shrink: 0; и никаких min-width не надо уже

Answer 3

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

Да, это нормально поведение флекс-элементов. Для переноса flex-wrap, как говорили выше(почти тоже что white-space). min-width тебе в помощь. Прочти для чего нужны flex-basis, flex-grow и flex-shrink(пригодится, если будешь делать липкий футер)

Answer 4

[Mikhail Derkach]

html5.by/blog/flexbox - тут подробное описание, и уделено внимание flex-wrap, как написано выше