Appearance
- default
- chenghua
- shijingshan
- sybz
- gulou
无数据
Flex 弹性布局
s-flex 是一个轻量级 flex 容器组件，用来快速设置主轴方向、换行、对齐方式、间距，以及组件自身在父级 flex 容器中的伸缩规则。
参考：Ant Design Vue Flex / MDN flex
Hidden Title
基础用法：
<s-flex class="h-100"></s-flex>属性事件插槽简介
基础用法
按钮间距（gap 默认值：0px）
常用属性
容器尺寸
图标间距（gap 默认值：0px）
基础写法：<s-flex gap="12"><s-icon icon="Edit" /><s-icon icon="Delete" /></s-flex>。gap 支持 small / default / large（8 / 16 / 24px）、数字和带单位的长度，默认值为 0px；裸写 gap 等价于 gap="small"。
样式简写属性（Style Props）
所有 sybz 组件都通过全局 mixin 自动接受 Mantine 风格的样式简写属性，无需逐个声明，直接以简写作为 prop 传入即可，例如 m（margin）、p（padding）、fs（font-size）、bg（background）、c（color）、w / h（宽高）、bd（border）、br（border-radius）等；长度类属性的数字会自动补全为 px。基础写法：<s-flex gap="small" m="12px" p="16px" bg="#f0f6ff"></s-flex>。
API
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
direction | 主轴方向，对应 flex-direction | string | row / row-reverse / column / column-reverse | row |
wrap | 是否换行；裸写或传 true 等价于 wrap，传 false 等价于 nowrap | boolean / string | true / false / nowrap / wrap / wrap-reverse | nowrap |
justify | 主轴对齐方式，对应 justify-content | string | start / end / center / space-between / space-around / space-evenly / normal | normal |
align | 交叉轴对齐方式，对应 align-items | string | start / end / center / baseline / stretch / normal | normal |
gap | 子元素间距，对应 gap；裸写或 true 等价于 small，false 等价于 0px | boolean / string / number | true / false / small / default / large / 任意可被 processWidth 处理的宽度 | 0px |
flex | 当前 s-flex 自身在父级 flex 容器中的伸缩规则，对应 CSS flex 简写 | string | 任意合法 CSS flex 值，如 1、0 0 180px | '' |
width | 容器宽度 | string / number | 任意可被 processWidth 处理的 CSS 长度 | - |
height | 容器高度 | string / number | 任意可被 processWidth 处理的 CSS 长度 | - |
component | 自定义根节点标签或组件 | string / Component | 原生标签名或 Vue 组件 | div |
Gap 预设
| 值 | 转换结果 |
|---|---|
裸写/true | 8px（等价于 small） |
false | 0px（等价于不设间距） |
small | 8px |
default | 16px |
large | 24px |
| number | 交给 processWidth 处理，通常转成 px |
| string | 交给 processWidth 处理，例如 12px、1rem、50% |
插槽
| 插槽名 | 说明 |
|---|---|
default | flex 容器内部内容 |
说明
justify="normal"和align="normal"时不会输出对应 CSS 属性，由浏览器默认行为决定。flex控制的是s-flex自身在父级 flex 容器里的伸缩，不是控制子项。component可以传原生标签，例如component="section"，也可以传 Vue 组件对象。