В этой статье будет показан способ упорядочивания гибких элементов и элементов сетки в Tailwind CSS.
Как заказать элементы Flex и Grid в Tailwind?
Чтобы упорядочить гибкие элементы и элементы сетки в Tailwind CSS, создайте файл HTML. Затем используйте утилиту «order-» и укажите значение порядка в программе HTML, чтобы изменить порядок элементов гибкости и сетки. Это позволяет отображать гибкие элементы в другом порядке, чем они отображаются в DOM (объектная модель документа). Чтобы гарантировать изменения, просмотрите веб-страницу в формате HTML.
Посмотрите на приведенные шаги для лучшего понимания:
Шаг 1: Заказ элементов Flex и Grid в программе HTML
Создайте HTML-программу и используйте « порядок-<значение> ” и укажите значение порядка для элементов flex или grid. Например, мы использовали утилиты «порядок-3», «порядок-последний», «порядок-первый» и «порядок-2».
< тело >
< див сорт '=' 'флекс х-20' >
< див сорт '=' 'ордер-3 бг-красный-500 ш-32 м-1' > 1 < / див >
< див сорт '=' 'заказ-последний бг-желтый-500 ш-32 м-1' > 2 < / див >
< див сорт '=' 'заказ-первый бг-бирюзовый-500 ш-32 м-1' > 3 < / див >
< див сорт '=' 'заказ-2 бг-оранжевый-500 ш-32 м-1' > 4 < / див >
< / див >
< / тело >
Здесь:
- “ заказ-3 » задает порядок элементов равным 3, и flex-элемент будет позиционироваться как третий элемент в flex-контейнере.
- “ последний заказ » устанавливает порядок элементов как последний, и он будет последним элементом в контейнере flex.
- “ первый заказ ” указывает порядок элементов, которые должны быть первыми, и он будет позиционироваться как первый элемент в контейнере flex.
- “ заказ-2 » устанавливает порядок элементов равным 2, и он будет позиционироваться как второй элемент в контейнере flex.
- “ ш-32 ” применяет 32 единицы ширины к каждому гибкому элементу.
- “ м-1 ” добавляет 1 единицу поля вокруг каждого гибкого элемента.
Шаг 2: проверьте вывод
Просмотрите веб-страницу HTML, чтобы убедиться, что элементы flex и grid упорядочены:
Можно заметить, что элементы flex и grid были успешно упорядочены в соответствии с тем, как они были указаны.
Заключение
Чтобы упорядочить гибкие элементы и элементы сетки в Tailwind CSS, используйте « порядок-<значение> ” и укажите значение порядка для элементов гибкости и сетки в программе HTML. Он переупорядочивает элементы гибкости и сетки на веб-странице. Для проверки просмотрите изменения на веб-странице HTML и убедитесь, что изменения внесены. В этой статье проиллюстрирован способ упорядочивания гибких элементов и элементов сетки в Tailwind CSS.