Windi CSS Flex 布局工具类速查

Flex

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

['flex']

行内 Flex

使用 inline-flex 创建一个行内 flex 容器。

['inline-flex']

Flex 方向

用于控制 flex 子项排列方向的工具类。

['row', 'row-reverse', 'col', 'col-reverse']

Flex Wrap

用于控制 flex 行的堆叠方向的工具类。

['wrap', 'wrap-reverse', 'nowrap']

Flex Stretch

用于同时控制 flex 子项如何伸缩的工具类。 | 简写 | 对应属性 | | :-----😐 :----: | | flex-1 | flex: 1 1 0% | | flex-auto | flex: 1 1 auto | | flex-initial | flex: 0 1 auto | | flex-none | flex: none |

Flex Grow

用于控制 flex 子项如何伸展的工具类。 | 简写 | 对应属性 | | :-----😐 :----: | | flex-grow-0 | flex-grow: 0 | | flex-grow | flex-grow: 1 |

Flex Shrink

用于控制 flex 子项如何被压缩的工具类。 | 简写 | 对应属性 | | :-----😐 :----: | | flex-shrink-0 | flex-shrink: 0 | | flex-shrink | flex-shrink: 1 |

属性值-简写