Горизонтальное пространство — это пространство по оси x между дочерними элементами контейнера flex или grid, когда они расположены в ряд. Вертикальное пространство — это пространство по оси Y между дочерними элементами контейнера flex или grid, когда они расположены в столбец.
Эта статья продемонстрирует:
- Как добавить горизонтальное пространство между элементами в Tailwind?
- Как добавить вертикальное пространство между элементами в Tailwind?
Как добавить горизонтальное пространство между элементами в Tailwind?
Чтобы добавить горизонтальное пространство между элементами в Tailwind, « пробел-x-<значение> ” используется с нужным элементом в программе HTML. Этот класс добавляет пространство между элементами по оси x.
Синтаксис
<элемент сорт '=' 'space-x-<значение> ...'>... < / элемент>
Здесь «x» представляет «ось x» или «горизонтальное пространство». Обязательно замените «<значение>» любым допустимым значением, например «4», «10» и т. д.
Пример: применение горизонтального пространства между элементами в Tailwind
В этом примере у нас есть гибкий контейнер с некоторыми дочерними элементами. Мы будем использовать « космос-x-8 » служебный класс с « <дел> », чтобы добавить горизонтальное пространство между его дочерними элементами:
< тело >
< див сорт '=' 'flex space-x-8 m-10 h-20 w-max' >
< див сорт '=' 'бг-бирюзовый-500 в-20 п-5' > 1 < / див >
< див сорт '=' 'бг-бирюзовый-500 в-20 п-5' > 2 < / див >
< див сорт '=' 'бг-бирюзовый-500 в-20 п-5' > 3 < / див >
< див сорт '=' 'бг-бирюзовый-500 в-20 п-5' > 4 < / див >
< див сорт '=' 'бг-бирюзовый-500 в-20 п-5' > 5 < / див >
< див сорт '=' 'бг-бирюзовый-500 в-20 п-5' > 6 < / див >
< / див >
< / тело >
Здесь, в родительском элементе
- “ сгибать ” создает гибкий макет.
- “ космос-x-8 » добавляет 8 единиц горизонтального интервала между гибкими элементами внутри контейнера.
- “ м-10 ” добавляет отступ в 10 единиц со всех сторон контейнера.
- “ ч-20 ” устанавливает высоту контейнера в 20 единиц.
- “ w-макс. » устанавливает ширину контейнера на максимальную ширину содержимого.
В дочерних элементах
- “ бг-бирюзовый-500 » задает бирюзовый фон flex-элементов.
- “ w-20 » устанавливает ширину каждого гибкого элемента в 20 единиц.
- “ р-5 » добавляет 5 единиц отступов со всех сторон каждого гибкого элемента.
Выход
Приведенный выше вывод показывает, что горизонтальное пространство между flex-элементом было успешно применено.
Как добавить вертикальное пространство между элементами в Tailwind?
Чтобы добавить вертикальное пространство между элементами в Tailwind, « пробел-y-<значение> ” используется с определенным элементом в программе HTML. Этот класс добавляет пространство между элементами по оси Y.
Синтаксис
<элемент сорт '=' 'пробел-y-<значение>...' >...< / элемент>Здесь «y» представляет «ось Y» или «вертикальное пространство». Обязательно замените «<значение>» любым реальным значением, например «5», «12» и т. д.
Пример: применение вертикального пространства между элементами в попутном ветре
В этом примере у нас есть гибкий контейнер с некоторыми дочерними элементами в столбце. Мы будем использовать « пробел-y-5 » служебный класс с « <дел> », чтобы добавить вертикальное пространство между его дочерними элементами:
< тело >< див сорт '=' 'flex flex-col space-y-5 m-10 text-center' >
< див сорт '=' 'бг-чирок-500 п-5' > 1 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 2 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 3 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 4 < / див >
< / див >
< / тело >
Здесь:
- “ сгибать ” создает гибкий макет.
- “ flex-col » выравнивает гибкие элементы в вертикальном направлении (в столбце).
- “ пробел-y-5 » добавляет 5 единиц вертикального интервала между гибкими элементами внутри контейнера.
- “ м-10 ” добавляет отступ в 10 единиц со всех сторон контейнера.
- “ текстовый центр » выравнивает текст контейнера по центру.
Выход
Вертикальное пространство между гибкими элементами было использовано эффективно.
Заключение
Чтобы добавить горизонтальное и вертикальное пространство между элементами в Tailwind, « пробел-x-<значение> ' и ' пробел-y-<значение> Вспомогательные классы используются с нужными элементами в программе HTML соответственно. Эти классы обычно используются с контейнерами flex и grid для управления пространством между их дочерними элементами. В этой статье показан метод применения горизонтального и вертикального пространства между элементами в Tailwind.