Параметры модификаторов

Параметр модификатора определяет для какой области будет действовать данный модификатор. Параметр модификатора ставится сразу после его обозначения и отделяется от него дефисом (-). У модификаторов могут быть следующие параметры свойств:

  • Ось
  • Сторона
  • Угол (стороны)

Оси

Для обозначения осей используются сокращения:

  • 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, radius-top-0.
  • Внешний отступ: m-top-0, m-left-4.
  • Внутренний отступ: p-bottom-3, p-right-4.

Примечание. Параметр стороны имеет схожее обозначение со значением выравнивания. Отличить параметр от значения можно тем, что после параметра обязательно должно быть указано значение:

  • Параметр: radius-left-1, 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, radius-top-0.

Если значение не указано, то оно равно нулю. Например a-lt, a-lb

Для обозначения всех сторон используется суффикс +all, например a+all-0

Во флексбоксах и сетке оси обозначаются следующими сокращениями:

Пример: self+m--right

Изменить статью