Выравнивание элементов

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

Класс	Свойства
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

Stretch

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

<div class="flex items-stretch ...">
  <div class="py-4">1</div>
  <div class="py-12">2</div>
  <div class="py-8">3</div>
</div>

Start

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

<div class="flex items-start ...">
  <div class="h-12">1</div>
  <div class="h-24">2</div>
  <div class="h-16">3</div>
</div>

Center

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

<div class="flex items-center ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

End

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

<div class="flex items-end ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Baseline

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

<div class="flex items-baseline ...">
  <div class="pt-4 pb-6 ...">1</div>
  <div class="pt-6 pb-10 ...">2</div>
  <div class="pt-8 pb-4 ...">3</div>
</div>

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

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

<div class="items-stretch md:items-center ...">
  <!-- ... -->
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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