Позиционирование #

Order #

Утилиты для управления порядком элементов гибкости и сетки.

xxxxxxxxxx

order-5

{}

.order-5 {
  -webkit-box-ordinal-group: 6;
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}

export default {
  theme: {
    order: {
      first: '-9999',
      last: '9999',
      none: '0',
      normal: '0',
    },
  },
}

Justify Content #

Утилиты для управления расположением элементов гибкости и сетки вдоль главной оси контейнера.

xxxxxxxxxx

justify-start

{}

.justify-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

Justify Items #

Утилиты для управления выравниванием элементов сетки по их встроенной оси.

xxxxxxxxxx

justify-items-auto

{}

.justify-items-auto {
  justify-items: auto;
}

Justify Self #

Утилиты для управления выравниванием отдельного элемента сетки по его встроенной оси.

xxxxxxxxxx

justify-self-auto

{}

.justify-self-auto {
  -ms-grid-column-align: auto;
  justify-self: auto;
}

Align Content #

Утилиты для управления расположением строк в многорядных гибких и сеточных контейнерах.

xxxxxxxxxx

content-center

{}

.content-center {
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

Align Items #

Утилиты для управления расположением элементов гибкости и сетки вдоль поперечной оси контейнера.

xxxxxxxxxx

items-start

{}

.items-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

Align Self #

Утилиты для управления расположением отдельного элемента гибкости или сетки вдоль поперечной оси контейнера.

xxxxxxxxxx

self-center

{}

.self-center {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  -webkit-align-self: center;
  align-self: center;
}

Place Content #

Утилиты для одновременного управления выравниванием и выравниванием контента.

xxxxxxxxxx

place-content-center

{}

.place-content-center {
  place-content: center;
}

Place Items #

Утилиты для управления одновременным выравниванием и выравниванием элементов.

xxxxxxxxxx

place-items-auto

{}

.place-items-auto {
  place-items: auto;
}

Place Self #

Утилиты для управления одновременным выравниванием и выравниванием отдельного элемента.

xxxxxxxxxx

place-self-auto

{}

.place-self-auto {
  -ms-grid-row-align: auto;
  -ms-grid-column-align: auto;
  place-self: auto;
}

Position #

Утилиты для управления расположением элемента в DOM.

xxxxxxxxxx

static

{}

.static {
  position: static;
}

Top / Right / Bottom / Left #

Утилиты для управления размещением позиционируемых элементов.

Inset #

xxxxxxxxxx

inset-4

{}

.inset-4 {
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}

export default {
  theme: {
    inset: {
      sm: '1rem',
      lg: '4rem',
    },
  },
}

Inset Y #

inset-y-4

{}

.inset-y-4 {
  top: 1rem;
  bottom: 1rem;
}

Inset X #

xxxxxxxxxx

inset-x-4

{}

.inset-x-4 {
  right: 1rem;
  left: 1rem;
}

Top #

xxxxxxxxxx

top-4

{}

.top-4 {
  top: 1rem;
}

Right #

xxxxxxxxxx

right-4

{}

.right-4 {
  right: 1rem;
}

Bottom #

xxxxxxxxxx

bottom-4

{}

.bottom-4 {
  bottom: 1rem;
}

Left #

xxxxxxxxxx

left-4

{}

.left-4 {
  left: 1rem;
}

Floats #

Utilities for controlling the wrapping of content around an element.

xxxxxxxxxx

float-left

{}

.float-left {
  float: left;
}

Clear #

Утилиты для управления переносом содержимого вокруг элемента.

xxxxxxxxxx

clear-left

{}

.clear-left {
  clear: left;
}

Isolation #

Утилиты для управления тем, должен ли элемент явно создавать новый контекст стекирования. Эти утилиты особенно полезны при использовании вместе с mix-blend-mode и z-index.

xxxxxxxxxx

isolate

{}

.isolate {
  isolation: isolate;
}

Object Fit #

Утилиты для управления изменением размера содержимого заменяемого элемента.

xxxxxxxxxx

object-cover

{}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

Object Position #

Утилиты для управления тем, как содержимое заменяемого элемента должно располагаться в его контейнере.

xxxxxxxxxx

object-bottom

{}

.object-bottom {
  -o-object-position: bottom;
  object-position: bottom;
}

export default {
  theme: {
    objectPosition: {
      'bottom': 'bottom',
      'center': 'center',
      'left': 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      'right': 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      'top': 'top',
      'center-bottom': 'center bottom',
      'center-top': 'center top',
    },
  },
}

Z-Index #

Утилиты для управления порядком стека элемента.

xxxxxxxxxx

z-auto

{}

.z-auto {
  z-index: auto;
}

export default {
  theme: {
    zIndex: {
      first: 10,
      second: 20,
    },
  },
}