Flex 弹性布局
基于 CSS Flexbox 的布局组件。
基础用法
vue
<AFlex :gap="8">
<AButton>Item 1</AButton>
<AButton type="primary">Item 2</AButton>
<AButton>Item 3</AButton>
</AFlex>竖向排列
vue
<AFlex vertical :gap="8"> ... </AFlex>对齐与分布
vue
<AFlex :gap="8" align="center"> ... </AFlex>
<AFlex :gap="8" justify="space-between"> ... </AFlex>API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| vertical | boolean | false | 竖向排列 |
| inline | boolean | false | inline-flex 模式 |
| wrap | boolean | true | 是否换行 |
| align | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | — | 交叉轴对齐 |
| justify | 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | — | 主轴对齐 |
| gap | string | number | — | 间距 |
| flex | string | number | — | flex 值 |
| grow | number | — | flex-grow |
| shrink | number | — | flex-shrink |
| basis | string | — | flex-basis |
| tag | string | 'div' | 渲染标签 |