Параметры модификаторов
Параметр модификатора определяет для какой области будет действовать данный модификатор. Параметр модификатора ставится сразу после его обозначения и отделяется от него дефисом (-). У модификаторов могут быть следующие параметры свойств:
- Ось
- Сторона
- Угол (стороны)
Оси
Для обозначения осей используются сокращения:
- x – горизонтальная ось (x axis).
- y – вертикальная ось (y axis).
- main – основной ось (main axis).
- cross – поперечная ось (cross axis).
Основная и поперечная ось используются для флексбоксов и сетки. Во всех остальных случаях используются горизонтальная и вертикальная ось.
Обозначение оси отображается через дефис (-) после названия свойства.
Параметр стороны используется:
- Переполнение объекта:
overflow-y-auto,overflow-x-hidden. - Позиция элемента:
inset-x-0,inset-y-0. - Промежутки:
space-x-0,space-y-reverse. - Промежутки (flex и grid):
gap-x-0,gap-y-2. - Толщина разделителя:
divider-x-0,divider-y-1. - Масштабирование:
scale-x-0,scale-y-3. - Смещение:
translate-x-0,translate-y-1. - Наклон:
skew-x-0,skew-y-4. - Поведение при прокрутке:
scroll-over-y-auto,scroll-over-x-contain. - Выравнивание содержимого относительно поперечной оси:
content-cross-start,content-cross-end. - Выравнивание каждого элемента в ячейках относительно поперечной оси:
items-cross-start,items-cross-end. - Выравнивание отдельного элемента в ячейке относительно поперечной оси:
self-cross-auto,self-cross-start.
Примечание. Параметр оси имеет схожее обозначение со значением направления. Отличить параметр от значения можно тем, что после параметра обязательно должно быть указано значение:
- Параметр:
space-x-0,skew-y-4. - Значение:
bg-repeat-x,resize-y.
Сторона
Если модификатор применяется только для одной из сторон, то используется следующее обозначение сторон:
- left – левая сторона.
- right – правая сторона.
- top – верхняя сторона.
- bottom – нижняя сторона.
Обозначение оси отображается через дефис (-) после названия свойства.
Параметр стороны используется:
- Позиционирование элемента. Для позиционирования элемента и не используется обозначение свойства. Пример:
left-1/2,right-0,top-auto,-bottom-b2. - Закругление границы. Пример: radius-left-1/3, radius-top-0.
- Внешний отступ: m-top-0, m-left-1.
- Внутренний отступ: p-bottom-1, p-right-1.
Примечание. Параметр стороны имеет схожее обозначение со значением выравнивания. Отличить параметр от значения можно тем, что после параметра обязательно должно быть указано значение:
- Параметр: radius-left-1/3, top-1/2.
- Значение: text-left, bg-top.
Угол
Для обозначения угла сначала указывается сторона по горизонтали, а затем по вертикали:
- left-bottom – левый нижний угол.
- left-top – левый верхний угол.
- right-bottom – правый нижний угол.
- right-top – правый верхний угол.
Обозначение угла отображается через дефис (-) после названия свойства.
Параметр угла используется:
- Позиционирование элемента. Для позиционирования элемента и не используется обозначение свойства. Пример: left-1/2, right-0, top-auto, -bottom-b2.
- Закругление границы. Пример: radius-left-1/3, radius-top-0.
Если значение не указано, то оно равно нулю. Например a-lt, a-lb
Для обозначения всех сторон используется суффикс +all, например a+all-0
Во флексбоксах и сетке оси обозначаются следующими сокращениями:
Пример: self+m--right