Flexbox: контейнер и его оси

Знакомимся с Flexbox — главным инструментом для расстановки элементов в ряд или колонку.

Flexbox — режим раскладки, в котором контейнер гибко распределяет дочерние элементы вдоль одной оси и выравнивает их по другой.

Зачем нужен Flexbox

Поставить несколько блоков в ряд, выровнять их по центру, равномерно распределить по ширине — раньше это была боль. Flexbox решает такие задачи в пару строк. Достаточно сделать родителя flex-контейнером — и его дети начинают слушаться правил выравнивания.

<div class="row">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.row {
  display: flex;
}

Одна строка display: flex — и три блока, которые стояли бы друг под другом, выстраиваются в ряд. Контейнер называют flex-контейнером, а его прямых детей — flex-элементами.

Две оси

У flex-контейнера есть две оси: главная (по умолчанию горизонтальная, слева направо) и поперечная (перпендикулярная ей, сверху вниз). Понимание осей — ключ ко всему Flexbox. Направление главной оси меняет flex-direction:

.row {
  display: flex;
  flex-direction: row;    /* в ряд (по умолчанию) */
}

.col {
  display: flex;
  flex-direction: column; /* в колонку */
}

justify-content — вдоль главной оси

Это свойство распределяет элементы вдоль главной оси (по горизонтали при row).

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

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

Классическая шапка: логотип слева, меню справа, между ними — всё свободное пространство. Это и есть space-between.

align-items — вдоль поперечной оси

Выравнивает элементы по поперечной оси (по вертикали при row). Самое частое значение — center.

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

Все элементы выровняются по вертикальному центру — даже если они разной высоты, их «середины» окажутся на одной линии. А связка двух свойств даёт легендарное идеальное центрирование:

.center {
  display: flex;
  justify-content: center; /* по центру по горизонтали */
  align-items: center;     /* по центру по вертикали */
}

Содержимое окажется ровно в центре блока — задача, над которой раньше мучились часами.

gap — промежутки между элементами

Свойство gap задаёт расстояние между flex-элементами, не трогая края контейнера. Это удобнее, чем расставлять margin каждому.

.row {
  display: flex;
  gap: 16px;
}

Между всеми элементами появится зазор 16px — ровный и предсказуемый.

Итог

display: flex делает родителя flex-контейнером, а детей — flex-элементами.
justify-content распределяет вдоль главной оси, align-items — вдоль поперечной.
justify-content: center + align-items: center = идеальное центрирование; gap задаёт промежутки.