组件 · 布局
Flex 弹性布局
Flex 布局容器，支持 gap/orientation/wrap。
使用建议
- 避免：用负 margin 破坏 gap
- 限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造
引入
tsx
import { Flex } from '@selrux/ui/flex';演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
一
二
三
代码演示
基础用法
默认水平排列，gap 设置间距。
一
二
三
纵向与对齐
vertical 纵向排列，justify / align 对应 CSS 的 justify-content / align-items。
标题
较长的说明文字
操作
换行
wrap 允许子项换行。
标签 1
标签 2
标签 3
标签 4
标签 5
标签 6
标签 7
标签 8
标签 9
标签 10
标签 11
标签 12
方向、反向与对齐
orientation、reverse、inline、justify；子项 flex 比例由 flex 属性指定。
左
右
1
2
3（reverse）
inline
vertical
flex=1
flex=2
API
属性覆盖：示例用到 9 / 9 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
Flex
主题化弹性布局容器。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
orientation | 主轴方向；优先于 vertical。 | "horizontal" | "vertical" | - |
vertical | 便捷布尔；为 true 且未设 orientation 时视为垂直。 | boolean | - |
reverse | 主轴反向（row-reverse / column-reverse）。 | boolean | - |
inline | 使用 inline-flex。 | boolean | - |
wrap | 换行；true→wrap，false→nowrap，或完整 flex-wrap。 | false | true | "inherit" | "initial" | "wrap" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | false |
justify | 主轴对齐（justify-content）。 | Property.JustifyContent | - |
align | 交叉轴对齐（align-items）；竖向未设时默认为 stretch。 | Property.AlignItems | stretch |
flex | 容器自身的 CSS flex 简写。 | Property.Flex<string | number> | - |
gap | 子项间隙：六档 Token、单值或 [row, col]。 | FlexGap | - |
另有 280 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：FlexGap、FlexGapTier、FlexGapValue、FlexOrientation、FlexProps、FlexWrap