Flexbox: раскладываем блоки в ряд

Зачем нужен Flexbox

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

Включаем flex

Flexbox включают у родителя, и он управляет своими прямыми потомками:

<div class="cards">
  <article class="card">Пицца</article>
  <article class="card">Паста</article>
  <article class="card">Салат</article>
</div>

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

Карточки встали в ряд, а gap задал расстояние между ними — без лишних отступов у краёв.

Две оси

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

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

align-items — выравнивание поперёк главной оси: stretch (растянуть на всю высоту, по умолчанию), center, flex-start, flex-end.

Классика: шапка сайта

<header class="header">
  <a class="logo" href="/">Пиццерия</a>
  <nav class="menu">
    <a href="#menu">Меню</a>
    <a href="#delivery">Доставка</a>
    <a href="#contacts">Контакты</a>
  </nav>
</header>

.header {
  display: flex;
  justify-content: space-between;  /* логотип слева, меню справа */
  align-items: center;             /* по центру по высоте */
  padding: 16px;
}

.menu {
  display: flex;
  gap: 24px;
}

Flex-контейнеры можно вкладывать: шапка раскладывает логотип и меню, а меню — свои ссылки.

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

Раньше ровно отцентрировать блок было целым приключением. С Flexbox — две строки:

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

Столбец и перенос

• flex-direction: column — элементы встают столбцом, и главная ось становится вертикальной;
• flex-wrap: wrap — если элементы не помещаются в строку, они переносятся на следующую.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 250px;   /* расти, сжиматься, базовая ширина 250px */
}

Получилась сетка карточек, которая сама перестраивается под ширину экрана: на широком помещаются три в ряд, на телефоне — по одной.

flex: 1 — занять свободное место

Свойство flex у дочернего элемента говорит, как делить свободное место:

.search {
  display: flex;
  gap: 8px;
}

.search input {
  flex: 1;   /* поле растягивается на всё свободное место */
}

Кнопка «Найти» остаётся своего размера, а поле поиска занимает всё остальное.

<footer class="footer">
  <p>© 2026 Пиццерия</p>
  <nav class="footer-links">
    <a href="/about.html">О нас</a>
    <a href="/delivery.html">Доставка</a>
    <a href="/privacy.html">Конфиденциальность</a>
  </nav>
</footer>

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 16px;
}

.footer-links {
  display: flex;
  gap: 16px;
}