Промежутки
space
sm
md
lg
xl
В SIMAI Framework с помощью адаптивных размеров можно задать промежутки между дочерними элементами.
Классы
| Класс | Значение |
|---|---|
space-x-0 > * + * |
--sf-space--reverse-x: 0;
|
space-x-1\/4 > * + * |
--sf-space--reverse-x: 0;
|
space-x-1\/3 > * + * |
--sf-space--reverse-x: 0;
|
space-x-1\/2 > * + * |
--sf-space--reverse-x: 0;
|
space-x-1 > * + * |
--sf-space--reverse-x: 0;
|
space-x-2 > * + * |
--sf-space--reverse-x: 0;
|
space-x-3 > * + * |
--sf-space--reverse-x: 0;
|
space-x-4 > * + * |
--sf-space--reverse-x: 0;
|
space-x-5 > * + * |
--sf-space--reverse-x: 0;
|
space-x-6 > * + * |
--sf-space--reverse-x: 0;
|
space-x-7 > * + * |
--sf-space--reverse-x: 0;
|
space-x-8 > * + * |
--sf-space--reverse-x: 0;
|
space-y-0 > * + * |
--sf-space--reverse-y: 0;
|
space-y-1\/4 > * + * |
--sf-space--reverse-y: 0;
|
space-y-1\/3 > * + * |
--sf-space--reverse-y: 0;
|
space-y-1\/2 > * + * |
--sf-space--reverse-y: 0;
|
space-y-1 > * + * |
--sf-space--reverse-y: 0;
|
space-y-2 > * + * |
--sf-space--reverse-y: 0;
|
space-y-3 > * + * |
--sf-space--reverse-y: 0;
|
space-y-4 > * + * |
--sf-space--reverse-y: 0;
|
space-y-5 > * + * |
--sf-space--reverse-y: 0;
|
space-y-6 > * + * |
--sf-space--reverse-y: 0;
|
space-y-7 > * + * |
--sf-space--reverse-y: 0;
|
space-y-8 > * + * |
--sf-space--reverse-y: 0;
|
space-x-reverse > * + * |
--sf-space--reverse-x: 1;
|
space-y-reverse > * + * |
--sf-space--reverse-y: 1;
|
Описание
Адаптивный модификатор. Изменяет промежутки между дочерними элементами.
Использование модификатора: {контрольная точка}:space-{сторона}-{значение}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Сторона. Необязательный параметр. Может принимать значения:
x- по-горизонтали;y- по-вертикали.
- Значение. Обязательный параметр. Может принимать значения:
1...9- для высоты используются адаптивные размеры отступов;0- отступ равен нулю.
Горизонтальные промежутки
С помощью модификатора space-x-{0...9} можно задать горизонтальные промежутки у дочерних элементов.
1
2
3
<div class="flex space-x-5">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Вертикальные промежутки
С помощью модификатора space-y-{0...9} можно задать вертикальные промежутки у дочерних элементов.
1
2
3
<div class="space-y-5">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Обратный порядок
По умолчанию промежутки ставтся как внешний отступы слева (для горизонтальных) и сверху (для вертикальных) элементов, начиная со второго элемента. Поэтому при отображени элементов в обратном порядке, необходимо дополнительно указывать модифкатор space-x-reverse или space-y-reverse.
1
2
3
<div class="flex flex-row-reverse space-x-5 space-x-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Ограничения
Данная утилита работает только с горизонтальными или вертикальными элементами распололженными в один ряд. Для обарботки элементов расположенных в несколько рядов рекомендуется использовать сетку и утилиты разрыва.
Адаптивность
Для установки промежутка дочерних элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору промежутка.
Например, используйте модификатор md:space-x-5 для установки 5-го горизонтального промежутка для экранов размером Medium и больше.
<div class="md:space-x-5"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.