Flex
沿主轴和交叉轴排列对象。中文惯用名：弹性布局。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.flex |
| 名称 | Flex |
| 二级分类 | 布局（layout） |
| 用途 | 沿主轴和交叉轴排列对象 |
| 描述 | 中文惯用名：弹性布局。 |
预览
静态结构：渲染为 <div data-slot="flex">（class flex）；direction=vertical 追加 flex-col；gap 缺省应用默认间距令牌 gap-(--flex-gap)，命名档位 small / middle / large 读 --flex-gap-sm / md / lg 令牌，数字 gap 与 style 合并内联（gap: 0 显式关闭）；justify / align 映射 Tailwind 工具类（justify-start|center|end|between|around|evenly、items-start|center|end|baseline|stretch）。
DSL 结构
{
"type": "Flex",
"props": {
"justify": "space-between",
"align": "center",
"gap": 12
},
"children": [
{
"type": "Text",
"props": {
"text": "左区"
}
},
{
"type": "Text",
"props": {
"text": "中区"
}
},
{
"type": "Text",
"props": {
"text": "右区"
}
}
]
}何时用
何时使用
- 一维排列与对齐：两端对齐（space-between）、居中、纵向堆叠、基线对齐。
- 区块内的工具条 / 操作行：左标题右操作、图标 + 文本组合。
- 需要给子项分配伸缩权重：子项 style 里写 flex 值（配合 style 逃逸口）。
何时不用
- 只需一组相邻元素的一致间距：使用 Space（语义更窄、只表达间距）。
- 整页 / 区块栅格等宽分列：使用 Grid。
- 面板可拖拽分割：使用 Splitter / Resizable。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 两端对齐 | justify="space-between" 撑满主轴 | 区块头部：左标题 + 右操作 |
| 居中对齐 | justify="center" + align="center" | 空态、占位、单行动作区 |
| 纵向堆叠 | direction="vertical"（flex-col） | 紧凑表单行、卡片内文本块 |
| 命名间距档 | gap="small" | "middle" |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
direction | `'horizontal' | 'vertical'` | 'horizontal' |
gap | `number | 'small' | 'middle' |
justify | `'start' | 'center' | 'end' |
align | `'start' | 'center' | 'end' |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式（布局逃逸口，如 { flex: 1 }；与数字 gap 合并） |
children | DslNode[] | — | 子项（DSL 子树；子项的伸缩权重写在各自 style 上） |
使用规范
- 间距优先用命名档位（读令牌），皮肤切换时自动跟随；像素值只用于对齐视觉稿。
- 交叉轴对齐显式声明（图标 + 文本常用 align="center"），不依赖默认 stretch。
- 子项需要占满剩余宽度时给子项 style 写 flex，而不是给 Flex 加额外包装层。
- 同一行的 Flex 嵌套不超过两层，层级过深改用 Grid 一次分好。
正例
- ✓ 卡片头部：Flex justify="space-between" align="center"，左侧标题右侧操作。
- ✓ 空态：Flex direction="vertical" align="center" gap="middle" 居中排图标与文案。
反例
- ✕ 用 Flex + 手写 margin 替代 Space 表达相邻元素间距。
- ✕ 用 Flex 做整页等宽多列栅格（应使用 Grid）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。