Параметры Flex

Параметры Flex#

Свойство flex — это шорткат для трёх параметров:

flex: flex-grow flex-shrink flex-basis;

  1. flex-grow

Коэффициент роста — насколько элемент может увеличиваться, чтобы занять свободное место.

  • 1 → элемент может расти.

  • 0 → элемент не будет увеличиваться.

  1. flex-shrink

Коэффициент сжатия — насколько элемент может уменьшаться, если места не хватает.

  • 1 → элемент может сжиматься.

  • 0 → элемент не будет уменьшаться.

  1. calc(25% - 20px) flex-basis

Базовый размер элемента (до применения grow/shrink).

  • Здесь задана формула: 25% ширины родителя минус 20px.

  • То есть карточка изначально занимает примерно четверть ширины контейнера, а отнимаем 20px для учёта отступов (gap).

В итоге:

  • Карточка стартует с ширины ≈ 25% родителя − 20px.

  • Может увеличиваться (grow: 1) или уменьшаться (shrink: 1), если места много или мало.

Часто используемые комбинации параметров flex#

  1. Равномерное распределение (гибкие блоки одинаковой ширины)

flex: 1 1 0;

Все элементы занимают одинаковую ширину, независимо от содержимого.

  1. Фиксированная ширина, не растягивается

flex: 0 0 200px;

Элемент всегда 200px, не растёт и не сжимается.

  1. Минимум фиксированный, но может расти

flex: 1 0 200px;

Базово 200px, но если есть место — растянется.

  1. Минимум фиксированный, может сжиматься

flex: 0 1 200px;

Базово 200px, но при нехватке места сожмётся.

  1. Пропорциональное распределение

.item1 { flex: 2 1 0; }  /* займёт в 2 раза больше места */
.item2 { flex: 1 1 0; }  /* займёт в 1 раз */

Вместе они делят свободное пространство как 2:1.

  1. Адаптивная сетка карточек

flex: 1 1 calc(25% - 20px);

4 карточки в строку, но при уменьшении ширины — перестроятся.

Contents