Выравнивание содержимого по главной оси

​

Основы использования

​

Start

Используйте justify-start, чтобы выровнять элементы относительно начала главной оси контейнера:

<div class="flex justify-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​

Center

Используйте justify-center, чтобы выровнять элементы по центру главной оси контейнера:

<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​

End

Используйте justify-end, чтобы выровнять элементы относительно конца главной оси контейнера:

<div class="flex justify-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​

Space between

Используйте justify-between для выравнивания элементов по главной оси контейнера таким образом, чтобы между каждым элементом оставалось равное пространство:

<div class="flex justify-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​

Space around

Используйте justify-around для выравнивания элементов по главной оси контейнера таким образом, чтобы с каждой стороны каждого элемента оставалось равное количество места:

<div class="flex justify-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​

Space evenly

Используйте justify-evenly для выравнивания элементов по главной оси контейнера таким образом, чтобы вокруг каждого элемента было одинаковое пространство, но также с учетом удвоения пространства, которое вы обычно видите между каждым элементом при использовании justify-around:

<div class="flex justify-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​

Stretch

Используйте justify-stretch, чтобы позволить элементам контента заполнить доступное пространство вдоль главной оси контейнера:

<div class="grid grid-flow-col justify-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

​

Normal

Используйте justify-normal, чтобы упаковать элементы контента в их положение по умолчанию, как если бы значение justify-content не было установлено:

<div class="flex justify-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

---

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:justify-between, чтобы применять утилиту justify-between только при hover.

<div class="flex justify-start hover:justify-between">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:justify-between, чтобы применить утилиту justify-between только на экранах среднего размера и выше.

<div class="flex justify-start md:justify-between">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.