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

justify-content выравнивает flex-элементы вдоль главной оси контейнера и управляет распределением свободного пространства между ними.

Зачем нужно

justify-content — основной инструмент для горизонтального (при flex-direction: row) расположения групп элементов: выровнять по центру, прижать к краям, равномерно распределить. Один из самых частых паттернов: навбар с лого слева и кнопками справа через space-between.

Где используется

  • Навбар: лого и кнопки по краям (space-between)
  • Центрирование кнопок в блоке (center)
  • Равномерное распределение пунктов меню
  • Прижатие группы кнопок вправо (flex-end)

Значения

.container {
  display: flex;
  justify-content: flex-start;    /* начало главной оси (по умолчанию) */
  justify-content: flex-end;      /* конец главной оси */
  justify-content: center;        /* по центру */
  justify-content: space-between; /* первый и последний у краёв, остальные равномерно */
  justify-content: space-around;  /* равные отступы вокруг каждого элемента */
  justify-content: space-evenly;  /* равные отступы между всеми элементами и краями */
}

Примеры

flex-start и flex-end

.toolbar {
  display: flex;
  justify-content: flex-end; /* кнопки прижаты вправо */
  gap: 8px;
}

center — центрирование

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

<div class="hero-buttons">
  <button>Начать</button>
  <button>Узнать больше</button>
</div>

space-between — навбар

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

<nav class="navbar">
  <a class="logo" href="/">Логотип</a>
  <div class="nav-links">
    <a href="/about">О нас</a>
    <a href="/contact">Контакты</a>
  </div>
</nav>

Сравнение space-*

space-between: |A    B    C|  — крайние у краёв
space-around:  | A   B   C | — равные отступы вокруг
space-evenly:  |  A  B  C  | — все промежутки одинаковы

justify-content при flex-direction: column

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between; /* ссылки вверху, футер внизу */
}

Важно: работает только при наличии свободного пространства

Если элементы заняли весь контейнер (flex-grow: 1 у всех), justify-content не имеет эффекта — свободного пространства нет.

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

  1. justify-content без display: flex — не работает
  2. Путаница при flex-direction: column — тогда justify-content выравнивает по вертикали, а align-items по горизонтали
  3. space-between с одним элементом — ничего не происходит, один элемент прижимается к началу

Связанные темы

Ресурсы