Positioning

Order

用于控制 flex 和 grid 子条目顺序的工具类。

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
Customizing
windi.config.js
export default {
  theme: {
    order: {
      first: '-9999',
      last: '9999',
      none: '0',
      normal: '0',
    },
  },
}

Justify Content

用于控制 flex 和 grid 子条目如何沿容器主轴定位的工具类。

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

用于控制行在多行 flex 和 grid 容器中定位的工具类。

center
start
end
between
around
evenly
CSS

Align Items

用于控制 flex 和 grid 子条目沿容器的交叉轴定位的工具类。

start
end
center
baseline
stretch
CSS

Align Self

用于控制单个 flex 和 grid 子条目沿其容器的交叉轴定位的工具类。

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
Customizing
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

用于控制元素浮动的工具类。

right
left
none
CSS

Clear

用于控制元素取消浮动的工具类。

right
left
both
none
CSS

Isolation

用于控制元素是否显式创建新上下文的工具类。这些工具类与 mix-blend-modez-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
Customizing
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
Customizing
windi.config.js
export default {
  theme: {
    zIndex: {
      first: 10,
      second: 20,
    },
  },
}