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