Logo Windi CSS

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

Order

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

first
last
none
1
2
3
4
5
6
7
8
9
10
11
12
13
14
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-11
-12
-13
-14
-6666
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    order: {
      first: '-9999',
      last: '9999',
      none: '0',
      normal: '0',
    },
  },
}

Justify Content 
Утилиты для управления расположением элементов гибкости и сетки вдоль главной оси контейнера.
start
end
center
between
around
evenly
CSS
Justify Items 
Утилиты для управления выравниванием элементов сетки по их встроенной оси.
auto
start
end
center
stretch
CSS
Justify Self 
Утилиты для управления выравниванием отдельного элемента сетки по его встроенной оси.
auto
start
end
center
stretch
CSS
Align Content 
Утилиты для управления расположением строк в многорядных гибких и сеточных контейнерах.
center
start
end
between
around
evenly
CSS
Align Items 
Утилиты для управления расположением элементов гибкости и сетки вдоль поперечной оси контейнера.
start
end
center
baseline
stretch
CSS
Align Self 
Утилиты для управления расположением отдельного элемента гибкости или сетки вдоль поперечной оси контейнера.
auto
start
end
center
stretch
CSS
Place Content 
Утилиты для одновременного управления выравниванием и выравниванием контента.
center
start
end
between
around
evenly
stretch
CSS
Place Items 
Утилиты для управления одновременным выравниванием и выравниванием элементов.
auto
start
end
center
stretch
CSS
Place Self 
Утилиты для управления одновременным выравниванием и выравниванием отдельного элемента.
auto
start
end
center
stretch
CSS
Position 
Утилиты для управления расположением элемента в DOM.
static
fixed
absolute
relative
sticky
CSS
Top / Right / Bottom / Left 
Утилиты для управления размещением позиционируемых элементов.
Inset 
0
px
auto
full
0.5
1
2
4
8
12
14
16
20
24
48
1/3
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-1/3
-1.5rem
-32px
-full
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    inset: {
      sm: '1rem',
      lg: '4rem',
    },
  },
}

Inset Y 
0
px
auto
full
0.5
1
2
4
8
12
14
16
20
24
48
1/3
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-1/3
-1.5rem
-32px
-full
CSS
Inset X 
0
px
auto
full
0.5
1
2
4
8
12
14
16
20
24
48
1/3
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-1/3
-1.5rem
-32px
-full
CSS
Top 
0
px
auto
full
0.5
1
2
4
8
12
14
16
20
24
48
1/3
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-1/3
-1.5rem
-32px
-full
CSS
0
px
auto
full
0.5
1
2
4
8
12
14
16
20
24
48
1/3
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-1/3
-1.5rem
-32px
-full
CSS
Bottom 
0
px
auto
full
0.5
1
2
4
8
12
14
16
20
24
48
1/3
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-1/3
-1.5rem
-32px
-full
CSS
Left 
0
px
auto
full
0.5
1
2
4
8
12
14
16
20
24
48
1/3
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-1/3
-1.5rem
-32px
-full
CSS
Floats 
Utilities for controlling the wrapping of content around an element.
right
left
none
CSS
Clear 
Утилиты для управления переносом содержимого вокруг элемента.
right
left
both
none
CSS
Isolation 
Утилиты для управления тем, должен ли элемент явно создавать новый контекст стекирования. Эти утилиты особенно полезны при использовании вместе с mix-blend-mode и z-index.
isolate
isolation-auto
CSS
Object Fit 
Утилиты для управления изменением размера содержимого заменяемого элемента.
contain
cover
fill
none
scale-down
CSS
Object Position 
Утилиты для управления тем, как содержимое заменяемого элемента должно располагаться в его контейнере.
bottom
center
left
left-bottom
left-top
right
right-bottom
right-top
top
CSS
 Персонализация 
windi.config.js
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 
Утилиты для управления порядком стека элемента.
auto
0
1
2
3
4
5
10
20
30
40
50
60
-1
-2
-3
-5
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    zIndex: {
      first: 10,
      second: 20,
    },
  },
}