Flexbox или flex container — это макет, который позволяет пользователям выравнивать и распределять элементы внутри контейнера. Tailwind CSS предлагает различные служебные классы для создания и работы с flexbox. Flex-контейнер уровня блока — это гибкий контейнер, который ведет себя/действует как элемент уровня блока и создает блок. Он занимает всю ширину своего родительского элемента и создает новую строку после себя.
В этой статье будет показан метод создания гибкого контейнера на уровне блоков в Tailwind.
Как создать/создать Flex-контейнер блочного уровня в Tailwind?
Чтобы создать конкретный гибкий контейнер на уровне блока в Tailwind, создайте структуру HTML. Затем добавьте « сгибаться ” служебный класс с нужным
Синтаксис
< див сорт '=' 'флекс...' >
...
див >
Код
< тело >
< див сорт '=' 'flex gap-2 m-2 border-2 border-black' >
< див сорт '=' 'бг-желтый-500 п-4' > Первый элемент див >
< див сорт '=' 'бг-желтый-500 п-4' > Второй пункт див >
< див сорт '=' 'бг-желтый-500 п-4' > Третий пункт див >
див >
тело >
Здесь, в родительском контейнере
-
- “ сгибаться ” используется для создания гибкого контейнера блочного уровня.
- “ разрыв-2 » добавляет 2 единицы расстояния между дочерними элементами flex.
- “ м-2 » добавляет 2 единицы поля ко всем сторонам контейнера.
- “ граница-2 ” добавляет границу к контейнеру шириной в 2 единицы.
- “ бордюр-черный ” устанавливает черный цвет границы.
В дочерних элементах flex:
-
- “ бг-желтый-500 » применяет желтый цвет к фону гибкого элемента.
- “ р-4 » добавляет отступы в 4 единицы со всех сторон flex-элементов.
Выход
В приведенном выше выводе граница означает, что контейнер является гибким контейнером блочного уровня, который занимает всю ширину своего родительского элемента (браузера).
В качестве альтернативы пользователь может убедиться в этом, проверив элемент гибкого контейнера на веб-странице:
Приведенный выше вывод указывает, что контейнер является гибким контейнером блочного уровня.
Заключение:
Чтобы создать гибкий контейнер блочного уровня в Tailwind, необходимо добавить « сгибаться » служебный класс с конкретным контейнером и указать его дочерние элементы. Пользователи могут определять и изменять гибкие элементы в соответствии со своими потребностями. Для проверки добавьте границу в контейнер и просмотрите веб-страницу или проверьте этот элемент на веб-странице. В этой статье объясняется метод создания гибкого контейнера на уровне блоков в Tailwind.