Windi CSSFlexbox
Flex
Use flex to create a block-level flex container.
CSS
Flex Basis
Utilities for controlling the initial size of flex items.
0
1
2
3
4
5
6
7
8
9
10
11
12
14
16
20
24
28
32
36
40
44
48
52
56
60
64
72
80
96
auto
px
0.5
1.5
2.5
3.5
1/2
1/3
2/3
1/4
2/4
3/4
1/5
2/5
3/5
4/5
1/6
2/6
3/6
4/6
5/6
1/12
2/12
3/12
4/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
full
CSS
Inline Flex
Use inline-flex to create an inline flex container.
CSS
Flex Direction
Utilities for controlling the direction of flex items.
row
row-reverse
col
col-reverse
CSS
Flex Wrap
Utilities for controlling how flex items wrap.
wrap
wrap-reverse
nowrap
CSS
Flex Stretch
Utilities for controlling how flex items both grow and shrink.
1
auto
initial
none
CSS
Customizing
windi.config.js
export default {
theme: {
flex: {
1: '1 1 0%',
auto: '1 1 auto',
initial: '0 1 auto',
inherit: 'inherit',
none: 'none',
2: '2 2 0%',
},
},
}
Flex Grow
Utilities for controlling how flex items grow.
grow-0
grow
CSS
Customizing
windi.config.js
export default {
theme: {
flexGrow: {
0: 0,
DEFAULT: 2,
1: 1,
},
},
}
Flex Shrink
Utilities for controlling how flex items shrink.
shrink-0
shrink
CSS
Customizing
windi.config.js
export default {
theme: {
flexShrink: {
0: 0,
DEFAULT: 2,
1: 1,
},
},
}