Ответ
flex-grow и flex-shrink управляют поведением flex-элементов при наличии свободного места или его недостатке.
flex-grow:
- Определяет, как элемент будет увеличиваться относительно других, если есть свободное место.
- Значение по умолчанию:
0(не растёт). - Чем больше значение, тем больше элемент забирает свободного места.
flex-shrink:
- Определяет, как элемент будет уменьшаться, если места не хватает.
- Значение по умолчанию:
1(сжимается). - Чем больше значение, тем сильнее элемент сжимается.
Пример:
.container {
display: flex;
}
.item1 {
flex-grow: 1; /* Заберёт больше места */
}
.item2 {
flex-shrink: 2; /* Сожмётся сильнее при нехватке места */
}Ответ 18+ 🔞
А, ну вот, опять про эти ваши flex-grow и flex-shrink! Слушай, давай без этих заумных книжных формулировок, а то у меня уже терпения ноль, ебать. Объясню, как есть.
Представь, что у тебя есть диван и три мужика разной жадности. Это твой флекс-контейнер, блядь.
flex-grow — это когда диван большой, места дохуя. Значение по умолчанию у всех — 0, то есть сидят себе скромненько, не расползаются. Но если одному жадному уебану поставить flex-grow: 3, а другому flex-grow: 1, то первый начнёт расталкивать всех локтями и займёт свободного места в три раза больше, чем второй. Просто потому что может, сука. Он жадный.
flex-shrink — это когда на диван навалилась ещё и тёща, и места всем не хватает. Тут уже кто сильнее сожмётся. По умолчанию у всех 1 — сжимаются все по-братски, одинаково. Но если одному, например, поставить flex-shrink: 0, он упрётся рогом и ни на сантиметр не подвинется, пусть остальные хуярятся как хотят. А если flex-shrink: 3 — так этот вообще в лепёшку превратится, лишь бы всем поместиться, мученик ебаный.
Вот смотри на код, тут всё честно:
.container {
display: flex;
}
.item1 {
flex-grow: 1; /* Этот жадный, свободное место себе заберёт */
}
.item2 {
flex-shrink: 2; /* А этот при нехватке места сожмётся вдвое сильнее других, лох */
}Короче, grow — это про жадность, когда места много. Shrink — про паникёрство, когда места мало. Всё, ебушки-воробушки, больше ни хуя не запутаешься.