Flexbox: ряды, выравнивание и распределение пространства

Flexbox идеален для одномерных раскладок: ряд кнопок, шапка «логотип слева — меню справа», карточки в линии. Вы задаёте контейнер display: flex и управляете осью.

Главные свойства

justify-content — по главной оси, align-items — по поперечной, gap — промежутки без хака с margin. flex-wrap позволяет переносить элементы на узком экране.

Гибкость элементов

flex: 1 заставляет элемент забирать свободное место. Для медиа-объектов часто комбинируют фиксированную ширину медиа и растягиваемый текст.

Когда Flex, когда Grid

Если нужна двумерная сетка «и строки, и колонки сразу» — смотрите Grid. Для ряда — Flex.

HTML

<header class="top">
  <a class="top__logo" href="/">SeoUspeh</a>
  <nav class="top__nav">
    <a href="/programming/html">HTML</a>
    <a href="/programming/css">CSS</a>
    <a href="/programming/javascript">JS</a>
  </nav>
</header>

CSS

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: #102a43;
}
.top__logo {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.top__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.top__nav a {
  color: #d9e2ec;
  text-decoration: none;
}

Практическое задание

Задание: сверстайте шапку на Flexbox.

  • Логотип и меню в одном ряду
  • Меню тоже flex с gap
  • На узкой ширине ссылки переносятся (flex-wrap)
  • Без float и table-layout