Flex 弹性布局
Flex 为 Rue Design 补上一层语义化的弹性布局容器。它不为子元素额外包裹节点，展示className与style的直接组合方式，同时补充更完整的 的方向、对齐、换行、间距与伸缩能力。
JSX 代码标签现在展示完整示例 源码，去掉内部变换标记，复制后可以直接作为 Rue 组件起步。
何时使用
- 需要一组块级元素在横向、纵向、换行和间距之间快速切换。
- 希望直接控制 justify、align 和 flex，而不是在业务里手写整串原子类。
- 需要使用 Rue 的轻量组合方式，同时使用更语义化的布局 API。
# 基础横向布局
默认是横向主轴和顶对齐，适合做概览卡片、摘要指标和信息排布。
ARR
¥ 4.2M
较上周新增 11.8%，续费健康。
Active Rooms
128
8 个房间处于重点观察，已自动提优先级。
Feedback
94%
工单满意度稳定在 90% 以上，主要集中于移动端。
# 纵向布局、inline 与语义根节点
vertical 负责切换主轴，inline 适合紧凑工具条，as / component 用于语义化容器。
Release train
v0.0.39
回归通过 248 项，文档、组件库和运行时构建已全部排队完成。
build greendocs synced2 follow-ups
# 对齐方式组合
justify 和 align 支持常用语义，也支持更贴近 CSS 的原生值。
justify="between" + align="center"
A
B
C
justify="around" + align="top"
A
B
C
justify="evenly" + align="bottom"
A
B
C
justify="center" + align="stretch"
A
B
C
# 间距预设与自定义 gap
预设值适合组件库级别的一致节奏，自定义值适合更精细的密度控制。
gap="small"
smallcompacttoolbartoken
gap="middle"
middleroomydefaultbalanced
gap="large"
largeeditorialairy
gap="12px 24px"
Mon
Tue
Wed
Thu
Fri
Sat
# 自动换行与 wrap-reverse
Flex 不额外包裹子项，适合标签墙、过滤器组和多操作按钮区。
wrap
wrap="wrap-reverse"
Realtime OpsInbox ZeroStreamingDesign ReviewRelease NotesWorkspace AILatencyPinnedExperimentBillingTeam SyncRoadmap
# 组合布局
Flex 适合做工作台框架、工具栏和内容区骨架；flex 属性让容器本身参与父级伸缩。
Live workspace
Signals board
Incident pulse
07
当前处于活跃处理状态的事故数，比昨天下降 3 起。
Response SLA
11m
过去 24 小时平均首次响应时间，已经回到目标区间内。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | Rue 风格的根节点别名，可直接声明 section、nav、ul 等语义容器。 | any | 'div' |
component | 与 as 类似的根节点声明方式；优先级高于 as。 | any | - |
vertical | 是否切换为纵向主轴，相当于 flex-direction: column。 | boolean | false |
orientation | 显式指定主轴方向；传入时会覆盖 vertical。 | 'horizontal' | 'vertical' | 'horizontal' |
inline | 把容器切换为 inline-flex，适合行内工具条或标签组。 | boolean | false |
wrap | 控制是否换行，也支持 wrap-reverse 等原生 CSS 值。 | boolean | 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' |
justify | 设置主轴对齐，支持 between/around/evenly 等语义别名。 | string | - |
align | 设置交叉轴对齐，支持 top/middle/bottom 等语义别名。 | string | horizontal: flex-start / vertical: stretch |
gap | 设置子元素间距，支持 small、middle、large 与 number/string。 | 'small' | 'middle' | 'medium' | 'large' | number | string | - |
flex | 设置当前 Flex 容器自身在父 Flex 中的伸缩规则。 | number | string | - |
className | 继续叠加 Rue / Tailwind 的圆角、边框、背景、尺寸等样式。 | string | - |
style | 补充原生样式；适合表达 minWidth、backdropFilter 等细节。 | Record<string, any> | - |