Flexbox

По умолчанию блоки идут друг под другом. Flexbox (гибкая раскладка) выстраивает их в ряд или в колонку и управляет выравниванием и свободным местом. Это основной инструмент для шапок, меню, панелей с кнопками и карточек.

Контейнер и элементы

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

<style>
  .row { display: flex; }
  .row div { padding: 12px; background: lavender; border: 1px solid mediumpurple; }
</style>
 
<div class="row">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
</div>

Элементы стали шириной по содержимому и выстроились слева направо.

Направление

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

<style>
  .col { display: flex; flex-direction: column; }
  .col div { padding: 8px; background: honeydew; border: 1px solid seagreen; }
</style>
 
<div class="col">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
</div>

Промежутки

gap задаёт расстояние между элементами. Отступы у самих элементов не нужны, и снаружи крайних элементов лишнего места не появляется:

<style>
  .row { display: flex; gap: 16px; }
  .row div { padding: 12px; background: lavender; }
</style>
 
<div class="row">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
</div>

Выравнивание по главной оси

justify-content распределяет свободное место вдоль главной оси:

Значение	Результат
`flex-start`	Элементы прижаты к началу (по умолчанию)
`center`	По центру
`flex-end`	Прижаты к концу
`space-between`	Крайние у краёв, остальное место поровну между элементами

<style>
  .row { display: flex; gap: 8px; margin-bottom: 8px; background: whitesmoke; }
  .row div { padding: 8px 12px; background: lightskyblue; }
  .center { justify-content: center; }
  .between { justify-content: space-between; }
  .end { justify-content: flex-end; }
</style>
 
<div class="row center"><div>A</div><div>B</div></div>
<div class="row between"><div>A</div><div>B</div></div>
<div class="row end"><div>A</div><div>B</div></div>

Выравнивание поперёк

align-items выравнивает элементы по поперечной оси — в ряду это высота контейнера. Вместе с justify-content: center он ставит элемент точно в центр блока:

<style>
  .stage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    background: whitesmoke;
  }
  .stage div { padding: 12px; background: gold; }
</style>
 
<div class="stage"><div>В центре</div></div>

По умолчанию align-items равен stretch: элементы растягиваются на всю высоту ряда.

Перенос

Если элементы не помещаются, flexbox сжимает их в одну строку. flex-wrap: wrap разрешает переносить их на новую строку:

<style>
  .tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .tags span { padding: 4px 12px; border-radius: 999px; background: honeydew; border: 1px solid seagreen; }
</style>
 
<div class="tags">
  <span>HTML</span><span>CSS</span><span>JavaScript</span><span>Python</span>
  <span>TypeScript</span><span>PHP</span><span>SQL</span><span>Rust</span>
  <span>Kotlin</span><span>Swift</span><span>Go</span><span>Ruby</span>
</div>

Частая ошибка

display: flex действует только на прямых потомков контейнера. Если элементы завёрнуты в ещё один блок, в ряд встанет сам этот блок, а не они:

<style>
  .wrong { display: flex; gap: 8px; }
  .wrong span { padding: 8px; background: mistyrose; }
</style>
 
<div class="wrong">
  <div>
    <span>Первый</span>
    <span>Второй</span>
  </div>
  <span>Третий</span>
</div>

Первые два элемента остались внутри обёртки и не получили gap. Включайте flexbox на том блоке, чьи дети должны выстроиться.

Спасибо, что читаете!