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

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

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

Start

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

<div class="flex justify-start ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Center

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

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

End

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

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

Space between

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

<div class="flex justify-between ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space around

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

<div class="flex justify-around ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space evenly

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

<div class="flex justify-evenly ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

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

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

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

Варианты

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

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

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

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

Отключение

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

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