В этой статье объясняется, как установить flex-basis в Tailwind CSS.
Как установить Flex Basis в Tailwind?
Чтобы установить flex-основу в Tailwind CSS, создайте HTML-файл. Затем используйте « основа-<размер> » в программе HTML и укажите размер гибкого элемента. Эта утилита устанавливает начальный размер flex-элементов. Чтобы убедиться в изменениях, просмотрите веб-страницу.
Посмотрите на приведенные шаги для практической демонстрации:
Шаг 1: Установите Flex Basis в HTML-программе
Создайте HTML-программу и используйте « основа-<размер> », чтобы установить размер гибкого элемента. Например, мы использовали « основа-1/4 », « основа-1/3 ', и ' основа-1/2 » утилиты для установки трех гибких элементов:
< тело >
< див сорт '=' 'флекс х-20' >
< див сорт '=' 'база-1/4 бг-крас-400 м-1' > 1 < / див >
< див сорт '=' 'база-1/3 бг-чирок-400 м-1' > 2 < / див >
< див сорт '=' 'база-1/2 бг-оранжевая-400 м-1' > 3 < / див >
< / див >
< / тело >
Здесь:
- “ сгибаться » используется для создания гибкого макета и настройки размеров дочерних элементов в зависимости от доступного места.
- “ ч-20 ” устанавливает высоту в 20 единиц.
- “ основа-1/4 » устанавливает ширину внутреннего элемента
равной 25% от его родительского элемента.- “ основа-1/3 » устанавливает ширину внутреннего
на 33,33% от его родительского контейнера.- “ основа-1/2 » устанавливает ширину
равной 50% его родительского контейнера.- “ бг-красный-400 ” применяет красный цвет фона к
.- “ бг-бирюзовый-400 » задает бирюзовый цвет для фона
.- “ бг-оранжевый-400 ” применяет оранжевый цвет фона к
.- “ м-1 ” добавляет отступ в 1 единицу вокруг каждого элемента
.Шаг 2: проверьте вывод
Чтобы убедиться, что flex-basis установлен и работает правильно, просмотрите веб-страницу в формате HTML:
В приведенном выше выводе можно увидеть основу гибкости, в соответствии с которой они были стилизованы.
Заключение
Основа Flex позволяет пользователям создавать гибкие макеты, которые адаптируются к различным размерам и разрешениям экрана. Чтобы установить flex-basis в Tailwind CSS, « основа-<размер> Вспомогательный класс используется в программе HTML. Пользователям необходимо указать размер гибкого элемента и подтвердить изменения, просмотрев веб-страницу. В этой статье объясняется метод установки flex-basis в Tailwind CSS.
- “ основа-1/4 » устанавливает ширину внутреннего элемента