В этой статье будет показан метод применения точек останова и медиа-запросов к утилитам «justify-content» в Tailwind.
Как применять точки останова и медиа-запросы с «выравниванием содержимого» в Tailwind?
Чтобы применить определенные точки останова и медиа-запросы к утилитам «выравнивания содержимого» в Tailwind, создайте структуру HTML. Затем задайте желаемое значение для «выровнять-<значение>» утилита для различных размеров экрана с помощью « Мэриленд ' или ' LG ' контрольные точки. Далее измените размер экрана веб-страницы для проверки.
Пример
В приведенном ниже примере у нас есть гибкий контейнер со свойством «justify-start». Мы будем использовать « Мэриленд ” точка останова с «оправдать-между» полезность и « LG ” точка останова с «оправдать-конец» полезность в «<дел>» элемент для изменения горизонтального выравнивания своих элементов на среднем и большом экране:
< тело >
< див сорт '=' 'flex justify-start md:justify-between lg:justify-end gap-3 m-3 bg-teal-700' >
< див сорт '=' 'bg-желтый-400 w-24 h-12' > 1 < / див >
< див сорт '=' 'bg-желтый-400 w-24 h-12' > 2 < / див >
< див сорт '=' 'bg-желтый-400 w-24 h-12' > 3 < / див >
< / див >
< / тело >
Здесь:
- «оправдать-начать» class выравнивает flex-элементы по началу главной оси контейнера.
- «md: выровнять между» class распределяет flex-элементы вдоль главной оси контейнера с одинаковым интервалом между ними на экране среднего размера.
- «lg: по выравниванию-конец» class выравнивает гибкие элементы в конце основной оси контейнера на большом экране.
Выход
Приведенный выше вывод показывает, что горизонтальное выравнивание flex-элементов меняется по мере изменения размера экрана. Это указывает на то, что указанные точки останова и медиа-запросы были эффективно применены с помощью утилиты «justify-content».
Заключение
Для применения точек останова и медиа-запросов с помощью утилит «выравнивания содержимого» в Tailwind задайте желаемое значение для «выровнять-<значение>» утилита для различных размеров экрана с помощью « Мэриленд ' или ' LG ' контрольные точки. Для проверки измените размер экрана веб-страницы и убедитесь, что изменения внесены. В этой статье продемонстрирован пример применения нужных точек останова и медиа-запросов к утилитам «justify-content» в Tailwind.