Flexbox: оси, justify/align, gap, flex-grow

Освой две оси Flexbox, чтобы выравнивать, центрировать и распределять элементы в повседневных макетах.

9 мин · 3 вопросов

Панель навигации, ряд карточек, выровненная форма: Flexbox - это повседневный инструмент для одномерной раскладки. Всё держится на двух осях: главная ось (задаётся через flex-direction, по умолчанию горизонтальная) и поперечная ось, перпендикулярная первой. justify-content распределяет элементы вдоль главной оси, align-items выравнивает их по поперечной. Запомни эту пару: она решает большинство случаев. Возьмём классическую панель навигации.

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

Нескольких объявлений хватает, чтобы превратить этот список в профессиональную панель: space-between отодвигает логотип влево, а кнопку вправо, align-items: center выравнивает по вертикали элементы разной высоты, а gap разносит ссылки без единого отступа, которым нужно управлять.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Упражнение в уме: если ты переключишь .navbar на flex-direction: column, что сделает justify-content: space-between? Теперь он распределит элементы по вертикали, потому что главная ось повернулась. Это классическая ловушка Flexbox: justify-content и align-items означают не «горизонтально» и «вертикально», а «главная ось» и «поперечная ось». Ещё один обязательный сценарий: идеальное центрирование содержимого.

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow распределяет оставшееся свободное место между элементами. Конкретный случай: раскладка с фиксированной боковой панелью и содержимым, которое занимает всё остальное. flex: 0 0 240px фиксирует боковую панель (она не растёт и не сжимается), а flex-grow: 1 позволяет содержимому поглотить всё доступное пространство.

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. При flex-direction: column чем управляет justify-content?
   • Горизонтальным выравниванием элементов
   • Вертикальным выравниванием, потому что главная ось стала вертикальной
   • Расстоянием между строками текста
2. Какая комбинация центрирует элемент одновременно по горизонтали и по вертикали во flex-контейнере?
   • text-align: center и vertical-align: middle
   • justify-content: center и align-items: center
   • margin: 0 auto на контейнере
3. Во flex-контейнере у .a стоит flex-grow: 2, а у .b - flex-grow: 1. Что произойдёт?
   • .a всегда ровно вдвое шире .b
   • .a получит вдвое больше оставшегося свободного места, чем .b
   • .b спрячется в пользу .a