Jukk
@Jukk

Зачем нужен flex-shrink и flex-grow, если есть процентный width и min-width?

Зачем нужен flex-shrink и flex-grow, если есть процентный width и min-width?
  • Вопрос задан
  • 298 просмотров
Решения вопроса 2
@Flying
flex-shrink и flex-grow не имеют прямого отношения к размерам элемента в том плане что они не определяют размер напрямую (для этого есть flex-basis). Эти свойства определяют поведение элемента при сжатии (shrink) и расширении (grow).

Т.е. если значение этих свойств ненулевое - то элементу разрешено сжиматься / расширяться, причём с коэффициентом, определяемым значением этих свойств. При нулевом значении соответствующее изменение запрещено.

Более подробно можно почитать, например, на MDN (раз, два)
Ответ написан
Комментировать
1) С помощью width, min-width, max-width Вы манипулируете шириной дочерних элементов.
А с помощью свойств flex-shrink и flex-grow Вы распределяете между элементами недостающее или свободное пространство родителя соответственно при его недостаче или избытке.

2) Также, данные свойства влияют на элементы одинаково при изменении главной оси со "строки" на "колонку". Если же Вы зададите элементам ширину, например, 50%, а потом измените flex-direction на column, элементы начнут выстраиваться в колонку (друг под другом), но их ширина станет лишь 30% от родителя.
Это же касается и свойства "flex-basis", которое имеет преимущество в определенных ситуациях перед "width".

3) Никто не запрещает использовать "width".
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Brad9aga
@Brad9aga
flex-shrink и flex-grow
если кратко, то они работают как по горизонтали, так и по вертикали
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы