Свойства flex-элементов

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

flex-grow

Определяет, как элемент растёт и занимает свободное пространство. По умолчанию равен 0 (не растёт).

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

flex-shrink

Определяет, как элемент сжимается, когда места не хватает. По умолчанию равен 1.

flex-basis

Устанавливает начальный размер элемента до распределения свободного пространства:

Сокращение flex

Свойство flex объединяет grow, shrink и basis в одну запись:

/* flex: grow shrink basis */
.item {
    flex: 0 1 auto;    /* По умолчанию */
    flex: 1;           /* = flex: 1 1 0% — равномерное распределение */
    flex: auto;        /* = flex: 1 1 auto */
    flex: none;        /* = flex: 0 0 auto — фиксированный размер */
}

order

Изменяет порядок отображения элементов без изменения HTML:

Важно: order влияет только на визуальный порядок. Для скринридеров и навигации табом порядок остаётся как в HTML.

align-self

Переопределяет align-items контейнера для конкретного элемента:

Практический пример: Sticky Footer

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