Logo Windi CSS

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-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
 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,
    },
  },
}