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

​

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

​

Start

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

<div class="h-56 grid grid-cols-3 gap-4 content-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​

Center

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

<div class="h-56 grid grid-cols-3 gap-4 content-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​

End

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

<div class="h-56 grid grid-cols-3 gap-4 content-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​

Space between

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

<div class="h-56 grid grid-cols-3 gap-4 content-between ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​

Space around

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

<div class="h-56 grid grid-cols-3 gap-4 content-around ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​

Space evenly

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

<div class="h-56 grid grid-cols-3 gap-4 content-evenly ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​

Stretch

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

<div class="h-56 grid grid-cols-3 gap-4 content-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

​

Normal

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

<div class="h-56 grid grid-cols-3 gap-4 content-normal ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

---

​

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

​

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

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

<div class="grid content-start hover:content-around">
  <!-- ... -->
</div>

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

​

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

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

<div class="grid content-start md:content-around">
  <!-- ... -->
</div>

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