Flexbox

💡 Объяснение

Зачем нужен Flexbox

Блочные элементы по умолчанию встают друг под другом, как книги стопкой. А на сайтах постоянно нужно ставить элементы в ряд: пункты меню, карточки товаров, логотип слева и кнопки справа. Раньше это делали хитрыми трюками, а сейчас есть Flexbox (гибкие коробки) — простой и мощный инструмент раскладки.

Главное правило: контейнер и элементы

Во Flexbox всегда участвуют двое:

• flex-контейнер — родитель, которому мы пишем display: flex;;
• flex-элементы — его прямые дети. Они выстраиваются сами.

<nav class="menu">
  <a href="#">Главная</a>
  <a href="#">Галерея</a>
  <a href="#">Контакты</a>
</nav>

.menu {
  display: flex;
}

Всё — ссылки встали в ряд. Представь, что контейнер — это полка, а элементы — книги на ней. Мы управляем полкой, а книги расставляются по её правилам.

Оси

У Flexbox есть две оси:

• главная ось — вдоль которой идут элементы. По умолчанию горизонтально, слева направо;
• поперечная ось — перпендикулярно главной (по умолчанию вертикально).

flex-direction меняет направление главной оси: row (ряд, по умолчанию) или column (колонка). При column оси «поворачиваются».

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

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

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

• stretch — растянуть на всю высоту контейнера (по умолчанию — поэтому карточки в ряд одинаковой высоты);
• center — по центру по вертикали. Например, выровнять логотип и меню разной высоты;
• flex-start / flex-end — к верху / к низу.

Знаменитый трюк — идеальное центрирование блока по обеим осям:

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

gap — промежутки

gap: 16px; добавляет расстояние между элементами, но не по краям. Это удобнее, чем margin у каждого элемента.

flex-wrap — перенос

По умолчанию flex-элементы стараются уместиться в одну строку и сжимаются. flex-wrap: wrap; разрешает переносить элементы на новую строку, когда им не хватает места, — как слова в тексте. Очень важно для телефонов.

Свойства для детей

• flex: 1; — элемент забирает свободное место. Если у трёх карточек flex: 1, они будут одинаковой ширины и займут весь ряд. Если у одной flex: 2 — она будет вдвое шире остальных.
• min-width: 200px; — вместе с flex-wrap не даёт карточкам сжаться слишком сильно.
• margin-left: auto; — «отталкивает» элемент вправо.

Практика: шапка сайта

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu {
  display: flex;
  gap: 20px;
}

Обрати внимание: flex-контейнеры можно вкладывать. Шапка раскладывает логотип и меню, а меню внутри — свои ссылки.

Потренируйся в игре

Flexbox Froggy (flexboxfroggy.com, есть русский язык) — игра, где свойствами Flexbox нужно рассадить лягушек на кувшинки. 24 уровня — и все свойства запомнятся сами.

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

• display: flex написан детям, а не родителю.
• Ждут, что Flexbox разложит «внуков» — он работает только с прямыми детьми.
• Путают justify-content (главная ось) и align-items (поперечная).
• Забыт flex-wrap — на телефоне карточки сжимаются в «спагетти».

Проверь себя

1. Кому пишется display: flex — родителю или детям?
2. Как расставить логотип слева, а меню справа?
3. Как отцентрировать блок и по горизонтали, и по вертикали?