Flexbox (Flexible Box Layout) — мощный инструмент для создания гибких и адаптивных раскладок. Он позволяет легко выравнивать элементы, распределять пространство и управлять порядком.

1. display: flex — включаем флекс

Свойство display: flex превращает родительский элемент в флекс-контейнер, а его прямые дочерние элементы — в флекс-элементы.

По умолчанию все флекс-элементы выстраиваются в строку (row) и сжимаются под ширину своего содержимого. При flex-direction: column элементы сжимаются под высоту содержимого, но растягиваются по ширине.

.flex-container {
    display: flex;
}

2. flex-direction — направление оси

Определяет, в каком направлении выстраиваются флекс-элементы.

Возможные значения:

• row — по горизонтали (слева направо) — значение по умолчанию
• row-reverse — по горизонтали (справа налево)
• column — по вертикали (сверху вниз)
• column-reverse — по вертикали (снизу вверх)

flex-direction: row

.container {
    display: flex;
    flex-direction: row;
}

flex-direction: row-reverse

.container {
    display: flex;
    flex-direction: row-reverse;
}

flex-direction: column

.container {
    display: flex;
    flex-direction: column;
}

flex-direction: column-reverse

.container {
    display: flex;
    flex-direction: column-reverse;
}

3. justify-content — выравнивание по главной оси

Управляет распределением свободного пространства вдоль главной оси (направления флекса).

Возможные значения:

• flex-start — прижаты к началу (по умолчанию)
• flex-end — прижаты к концу
• center — по центру
• space-between — равномерно, первый у начала, последний у конца
• space-around — равные отступы вокруг каждого
• space-evenly — полностью равные отступы между и по краям

justify-content: flex-start

.container {
    display: flex;
    justify-content: flex-start;
}

justify-content: flex-end

.container {
    display: flex;
    justify-content: flex-end;
}

justify-content: center

.container {
    display: flex;
    justify-content: center;
}

justify-content: space-between

.container {
    display: flex;
    justify-content: space-between;
}

justify-content: space-around

.container {
    display: flex;
    justify-content: space-around;
}

justify-content: space-evenly

.container {
    display: flex;
    justify-content: space-evenly;
}

4. align-items — выравнивание по поперечной оси

Управляет выравниванием флекс-элементов вдоль поперечной оси (перпендикулярной главной).

Возможные значения:

• stretch — растягиваются на всю высоту (по умолчанию)
• flex-start — прижаты к началу
• flex-end — прижаты к концу
• center — по центру
• baseline — по базовой линии текста

align-items: stretch (по умолчанию)

.container {
    display: flex;
    align-items: stretch;
}

align-items: flex-start

.container {
    display: flex;
    align-items: flex-start;
}

align-items: flex-end

.container {
    display: flex;
    align-items: flex-end;
}

align-items: center

.container {
    display: flex;
    align-items: center;
}

align-items: baseline

.container {
    display: flex;
    align-items: baseline;
}