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

Справочник классов по умолчанию

Класс	Свойства
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;
content-evenly	align-content: space-evenly;

Start

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

<div class="h-48 flex flex-wrap content-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Center

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

<div class="h-48 flex flex-wrap content-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

End

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

<div class="h-48 flex flex-wrap content-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space between

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

<div class="h-48 flex flex-wrap content-between ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space around

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

<div class="h-48 flex flex-wrap content-around ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space evenly

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

<div class="h-48 flex flex-wrap content-evenly ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Адаптивность

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

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

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит align-content.

Вы можете контролировать, какие варианты создаются для утилит align-content для изменения свойства alignContent в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       alignContent: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения align-content, Вы можете полностью отключить их, установив для alignContent свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     alignContent: false,
    }
  }