Утилиты для управления расположением отдельного флекс элемента или сетки вдоль поперечной оси контейнера.
Используйте self-auto для выравнивания элемента на основе значения свойства контейнера align-items:
<div class="flex items-stretch ...">
<div>1</div>
<div class="self-auto ...">2</div>
<div>3</div>
</div>Используйте self-start, чтобы выровнять элемент по началу поперечной оси контейнера, несмотря на значение контейнера align-items:
<div class="flex items-stretch ...">
<div>1</div>
<div class="self-start ...">2</div>
<div>3</div>
</div>Используйте self-center, чтобы выровнять элемент по центру поперечной оси контейнера, несмотря на значение контейнера align-items:
<div class="flex items-stretch ...">
<div>1</div>
<div class="self-center ...">2</div>
<div>3</div>
</div>Используйте self-end, чтобы выровнять элемент по концу поперечной оси контейнера, несмотря на значение контейнера align-items:
<div class="flex items-stretch ...">
<div>1</div>
<div class="self-end ...">2</div>
<div>3</div>
</div>Используйте self-stretch, чтобы растянуть элемент до заполнения поперечной оси контейнера, несмотря на значение контейнера align-items:
<div class="flex items-stretch ...">
<div>1</div>
<div class="self-stretch ...">2</div>
<div>3</div>
</div>Чтобы контролировать выравнивание гибкого элемента в определенной контрольной точке, добавьте префикс {screen}: к любому существующему классу утилиты. Например, используйте md:self-end, чтобы применить утилиту self-end только при средних размерах экрана и выше.
<div class="items-stretch ...">
<div class="self-auto md:self-end ...">
<!-- ... -->
</div>
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит align-self.
Вы можете контролировать, какие варианты создаются для утилит align-self для изменения свойства alignSelf в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ alignSelf: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения align-self, Вы можете полностью отключить их, установив для alignSelf свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ alignSelf: false,
}
}