Расположить элементы в ряд — половина дела. Настоящая сила Flexbox раскрывается в выравнивании: прижать меню к краям, поставить логотип слева, а кнопку справа, отцентрировать содержимое карточки по вертикали, равномерно распределить пункты по ширине. Именно выравнивание превращает набор блоков в аккуратный, сбалансированный интерфейс. Это, пожалуй, самое используемое во Flexbox на практике.

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

Что уже умеем / что добавим

Вы умеете включать флекс, задавать направление и разрешать перенос. Теперь научимся выравнивать элементы внутри контейнера. В сквозном проекте мы доведём до ума шапку сайта: разнесём логотип и меню по краям и выровняем их по центру по вертикали.

Что вы узнаете в рамках статьи

• Как распределять элементы вдоль главной оси через justify-content.
• Как выравнивать элементы по поперечной оси через align-items.
• Какие значения распределения и выравнивания есть.
• Как центрировать элемент сразу по обеим осям.
• Зачем нужно align-content при переносе строк.

Ключевые термины

• justify-content — распределение элементов вдоль главной оси.
• align-items — выравнивание элементов вдоль поперечной оси.
• align-content — распределение строк, когда их несколько (при переносе).
• space-between — равные промежутки между элементами, крайние прижаты к краям.
• center — центрирование по соответствующей оси.

Распределение по главной оси: justify-content

Свойство justify-content распределяет элементы вдоль главной оси (при обычном направлении — по горизонтали). Самые частые значения:

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

Значение space-between разносит элементы по краям, а свободное место распределяет равными промежутками между ними — крайние прижаты к границам контейнера. Другие полезные значения: flex-start (прижать к началу, по умолчанию), flex-end (к концу), center (по центру), space-around и space-evenly (разные варианты равномерных промежутков). Именно space-between чаще всего используют в шапках, чтобы развести логотип и меню по разным краям.

Выравнивание по поперечной оси: align-items

Свойство align-items выравнивает элементы вдоль поперечной оси (при обычном направлении — по вертикали). Это решает классическую задачу — выровнять элементы разной высоты по одной линии:

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

Значение center центрирует элементы по вертикали внутри контейнера — крупный логотип и текстовые ссылки окажутся на одной средней линии, что выглядит опрятно. Другие значения: flex-start (по верхнему краю), flex-end (по нижнему), stretch (растянуть на всю высоту, по умолчанию) и baseline (по базовой линии текста).

Центрирование по обеим осям

Комбинируя два свойства, можно поместить элемент точно в центр контейнера — и по горизонтали, и по вертикали. Это одна из самых частых задач вёрстки, которую Flexbox решает в три строки:

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Содержимое блока .hero окажется ровно посередине — по центру и слева направо, и сверху вниз. Раньше вертикальное центрирование было головной болью верстальщиков; с Flexbox оно стало тривиальным. Запомните эту связку justify-content: center + align-items: center — вы будете применять её постоянно.

Распределение строк: align-content

Когда элементы переносятся на несколько строк (flex-wrap: wrap), появляется ещё одна ось управления — распределение самих строк. За него отвечает align-content:

.cards {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 400px;
}

Если строк несколько и в контейнере есть свободная высота, align-content управляет тем, как эти строки распределены по вертикали: center соберёт их к середине, space-between разнесёт по краям и так далее. Важно понимать разницу: align-items выравнивает элементы внутри одной строки, а align-content — строки между собой. align-content действует только при переносе и наличии свободного места по поперечной оси.

Применяем в проекте

Доведём шапку сайта до профессионального вида. Разместим слева логотип, справа — меню, разнесём их по краям и выровняем по центру по вертикали.

<header class="header">
  <div class="logo">Моя компания</div>
  <nav class="nav">
    <a href="#">Главная</a>
    <a href="#">Услуги</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
</header>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

Обновите страницу: логотип прижат к левому краю, меню — к правому, а по вертикали они выровнены по одной центральной линии. Это классическая, узнаваемая шапка сайта — и вы собрали её буквально несколькими строками. (Свойство gap для промежутков между ссылками мы подробно разберём в следующем уроке.)

Частые ошибки

• Путаница осей.
  justify-content работает вдоль главной оси, align-items — вдоль поперечной; при column они меняются местами.
• Смешение align-items и align-content.
  Первое выравнивает элементы в строке, второе — строки между собой (только при переносе).
• align-items без разницы по высоте.
  Эффект виден, когда у контейнера есть высота или элементы разного размера.
• Ожидание центрирования без display: flex.
  Все эти свойства работают только внутри флекс-контейнера.

Итоги

Прекрасная работа — вы освоили сердце Flexbox! Теперь вы умеете распределять элементы вдоль главной оси через justify-content, выравнивать по поперечной через align-items, центрировать содержимое сразу по обеим осям и управлять строками через align-content. Это самые востребованные приёмы гибкой раскладки — с ними вы соберёте практически любой макет. А ваша шапка сайта теперь выглядит как настоящая.

Вы делаете большие успехи! В следующем уроке разберём, как управлять размером самих флекс-элементов и промежутками между ними: flex-grow, flex-shrink, flex-basis и gap.