CSS Academy · Урок

Justify-Content и Align-Items

Распределяйте элементы по главной и поперечной осям с помощью justify-content и align-items.

«Justify-Content и Align-Items» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Два основных свойства выравнивания

Два наиболее часто используемых свойства выравнивания флексбокса:

justify-content — выравнивает элементы вдоль главной оси
align-items — выравнивает элементы вдоль поперечной оси

justify-content: flex-start

flex-start (по умолчанию) группирует элементы в начале главной оси. При направлении row элементы выравниваются по левому краю.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

Выравнивает элементы по центру главной оси. Это классический способ горизонтального центрирования с помощью флексбокса.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Группирует элементы в конце главной оси (справа при направлении row).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Распределяет элементы с одинаковыми промежутками между ними. Первый элемент находится в начале, последний — в конце; по краям промежутков нет.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Размещает одинаковое пространство вокруг каждого элемента. Крайние элементы получают половину пространства между внутренними элементами. Поэтому визуально отступы по краям вдвое меньше, чем промежутки между элементами.

justify-content: space-evenly

Все промежутки, включая промежутки по краям, одинаковы. В отличие от space-around, отступы по краям равны промежуткам между элементами.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (по умолчанию)

stretch (по умолчанию) растягивает все флекс-элементы по поперечной оси до размера контейнера по этой оси. Все элементы в контейнере со строковым направлением становятся одинаковой высоты.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Выравнивает элементы по центру поперечной оси. В контейнере со строковым направлением это означает вертикальное центрирование элементов. Это классическое решение для вертикального центрирования.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start и flex-end

flex-start выравнивает элементы по начальному краю поперечной оси (сверху при направлении row). flex-end выравнивает их по конечному краю поперечной оси (снизу при направлении row).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Выравнивает элементы так, чтобы их базовые линии текста совпадали. Это полезно, когда у элементов разные размеры шрифта, но они должны выглядеть выровненными.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Быстрая проверка

Какая комбинация идеально выравнивает флекс-элемент по центру контейнера и горизонтально, и вертикально?

Итоги

justify-content распределяет элементы вдоль главной оси с такими значениями, как flex-start, center и space-between. align-items размещает элементы на поперечной оси с помощью значений stretch, center и flex-start. Вместе они управляют выравниванием по обеим осям.

Часто задаваемые вопросы

Урок «Justify-Content и Align-Items» бесплатный?

Да — полный текст урока «Justify-Content и Align-Items» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Justify-Content и Align-Items»?

Распределяйте элементы по главной и поперечной осям с помощью justify-content и align-items. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Justify-Content и Align-Items»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy