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

Question

[Жук]

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

Comments

[WapSter]

Чтобы дробить пространство, а не вычислять его.

[Жук]

Тимур Турсунбаев, не надо ничего вычислять:

.logo {
  width: 30%;
}

.search {
  width: 50%;
}

.contacts {
  width: 20%;
}

[WapSter]

Жук, а если генерируется и тебе одному блоку нужно 2/3 пространства? Удачи в расчетах)
UPD. Хотя тут calc справиться, но все равно со степенью сжатия гораздо удобнее.

[Ankhena]

Жук, затем что комбинации могут быть очень разными, а не только 3 блока в ряд с процентным соотношением ширины.

Answer 1

[Flying]

flex-shrink и flex-grow не имеют прямого отношения к размерам элемента в том плане что они не определяют размер напрямую (для этого есть flex-basis). Эти свойства определяют поведение элемента при сжатии (shrink) и расширении (grow).

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

Более подробно можно почитать, например, на MDN (раз, два)

Answer 2

[Рома Зварич]

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

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

3) Никто не запрещает использовать "width".

Comments

[Жук]

по второму пункту: в каких ситуациях basis умеет преимущество над width?

[Рома Зварич]

Жук, например, в той же ситуации, что описана во втором пункте - изменение главной оси

Answer 3

[Brad9aga]

flex-shrink и flex-grow
если кратко, то они работают как по горизонтали, так и по вертикали