Flexbox: гибкость элементов

Разбираемся, как flex-элементы делят свободное место между собой и переносятся на новую строку.

Свойства flex-grow, flex-shrink и flex-basis определяют, как отдельный элемент растёт, сжимается и какой у него базовый размер.

flex-grow — как делить лишнее место

Если в контейнере остаётся свободное место, flex-grow решает, кто его заберёт. Число — это «доля жадности»: чем больше, тем больше места достанется элементу. По умолчанию 0 — элемент не растёт.

.sidebar { flex-grow: 1; }
.content { flex-grow: 3; }

Свободное место поделится в пропорции 1:3 — основная колонка получит втрое больше, чем боковая. Если задать всем элементам flex-grow: 1, они растянутся поровну и заполнят контейнер целиком.

flex-shrink — как сжиматься при нехватке места

Обратная ситуация: места не хватает. flex-shrink определяет, кто и насколько ужмётся. По умолчанию 1 — элементы сжимаются. Значение 0 запрещает сжатие.

.logo {
  flex-shrink: 0; /* логотип не сжимать никогда */
}

Логотип сохранит размер, а сожмутся соседи. Это спасает иконки и кнопки от расплющивания на узких экранах.

flex-basis — базовый размер

Задаёт стартовый размер элемента вдоль главной оси до распределения свободного места. По сути это «желаемая ширина» (или высота в колонке).

.item {
  flex-basis: 200px;
}

Сокращение flex

Все три свойства обычно пишут одной строкой flex: grow shrink basis. Самые частые рецепты стоит запомнить:

Запись	Смысл
`flex: 1`	расти, заполняя место поровну с другими
`flex: 0 0 200px`	не расти, не сжиматься, ровно 200px
`flex: 1 1 300px`	базис 300px, дальше гибко тянется и жмётся

.col {
  flex: 1; /* все колонки равной ширины */
}

flex-wrap — перенос на новую строку

По умолчанию flex-элементы стараются влезть в одну строку, сжимаясь. flex-wrap: wrap разрешает им переноситься на следующую строку, когда места не хватает.

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.gallery .item {
  flex: 1 1 200px; /* минимум ~200px, дальше тянутся */
}

Это рецепт адаптивной галереи: на широком экране карточки стоят в ряд по несколько штук, а на узком автоматически переносятся вниз. Меняется ширина окна — раскладка перестраивается сама, без медиазапросов.

align-self — выровнять один элемент особо

Если нужно выровнять по поперечной оси только один элемент, отличая его от остальных, есть align-self:

.special {
  align-self: flex-end; /* этот прижать книзу */
}

Итог

flex-grow делит свободное место, flex-shrink управляет сжатием, flex-basis — базовый размер.
flex: 1 — растянуть поровну; flex: 0 0 200px — фиксированный размер.
flex-wrap: wrap переносит элементы на новую строку — основа адаптивных галерей.