Logo Windi CSS

Flexbox

Flex

使用 flex 创建一个块级 flex 容器。

CSS
Flex Basis 
Utilities for controlling the initial size of flex items. 用于控制 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
行内 Flex 
使用 inline-flex 创建一个行内 flex 容器。
CSS
Flex 方向 
用于控制 flex 子项排列方向的工具类。
row
row-reverse
col
col-reverse
CSS
Flex Wrap 
用于控制 flex 行的堆叠方向的工具类。
wrap
wrap-reverse
nowrap
CSS
Flex Stretch 
用于同时控制 flex 子项如何伸缩的工具类。
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 
用于控制 flex 子项如何伸展的工具类。
grow-0
grow
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    flexGrow: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}

Flex Shrink 
用于控制 flex 子项如何被压缩的工具类。
shrink-0
shrink
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    flexShrink: {
      0: 0,
      DEFAULT: 2,
      1: 1,
    },
  },
}