Tailwind CSS предоставляет « выравнивание элементов » утилиты для управления положением элементов гибкости и сетки вдоль поперечной оси контейнера. Он имеет различные служебные классы, такие как «items-start», «items-center», «items-end», «items-baseline» и т. д. Кроме того, пользователи могут также использовать свойство hover с «items-
В этой статье будет проиллюстрирован метод применения утилит «hover on align-items» в Tailwind CSS.
Как применить Hover к утилитам «align-items» в Tailwind?
Чтобы применить наведение к утилитам «align-items» в Tailwind, создайте структуру HTML и добавьте « парить » служебный класс с желаемым « предметы-<значение> утилита в контейнере. Затем проверьте веб-страницу HTML и наведите указатель мыши на указанный элемент, чтобы проверить изменения.
Синтаксис
< элемент сорт '=' 'hover:items-<значение>...' > ... элемент >
Замените <значение> одним из следующих вариантов: «начало», «центр», «конец», «базовая линия» или «растяжение».
Пример
В этом примере мы создадим гибкий контейнер со свойством «items-start». Затем мы будем использовать « наведите курсор: элементы-центр ” класс в “ <дел> элемент. Это выровняет гибкие элементы по центру поперечной оси контейнера при наведении:
< тело >
< див сорт '=' 'flex items-start hover:items-center justify- вокруг text-center h-44 m-3 bg-pink-300 gap-4' >
< див сорт '=' 'бг-розовый-600 ру-4 w-40' > 1 див >
< див сорт '=' 'bg-pink-600 ру-12 w-40' > 2 див >
< див сорт '=' 'бг-розовый-600 ру-8 w-40' > 3 див >
див >
тело >
Здесь:
-
- “ элементы-начало » выравнивает гибкие элементы по началу контейнера по вертикали.
- “ наведите курсор: элементы-центр » вертикально выравнивает гибкие элементы по центру контейнера при наведении на них указателя мыши.
Выход
На приведенной выше веб-странице видно, что выравнивание flex-элементов меняется вдоль поперечной оси контейнера при наведении.
Заключение
Для применения эффекта наведения к утилитам «align-items» в Tailwind используйте « парить » класс полезности с особым « предметы-<значение> ” в контейнере flex или grid. Для проверки наведите указатель мыши на указанный контейнер на веб-странице. В этой статье продемонстрированы примеры применения эффекта наведения к утилитам «align-items» в Tailwind.