Flex 弹性布局
封装 CSS flexbox 的常用属性，配合主题间距 token 让"行内 / 垂直 / 两端对齐"等场景更直白。
何时使用
- 行内或垂直排列一组组件，间距用 token 控制。
- 两端对齐：左侧标题 + 右侧操作按钮。
- 子元素需要
flex-grow自动撑开剩余空间。
基本使用
默认水平方向，gap 决定间距（数字按 px，也可用 small / middle / large）。
间距预设
gap 接收 'small' / 'middle' / 'large'，分别对应 8 / 16 / 24px。
垂直布局
vertical 把方向切到列。
对齐方式
justify 对应 justify-content，align 对应 align-items。
自动换行
wrap 设为 true（或具体的 wrap / wrap-reverse / nowrap）控制超出容器时是否换行。
用 flex 简写撑满剩余空间
子组件包一层 <c-flex> 并设置 flex="1" 可以让它独占剩余空间。
自定义元素
component 改变渲染的标签，常用于语义化（section / nav / header 等）。
justify 全枚举
横轴对齐六种取值的视觉对照。
align 全枚举
纵轴对齐五种取值的视觉对照（容器有显式高度时差异最明显）。
反向换行
wrap="wrap-reverse" 让超出的子项在前一行的上方折回。
嵌套布局：页面骨架
vertical + 子级 <c-flex> 组合可以快速搭出「页头 / 主体（侧栏 + 内容）/ 页脚」三段式骨架。
业务工具栏（与 Space 区别）
<c-flex justify="space-between"> 适合「左标题 / 右操作」两端分布；<c-space> 更适合一组按钮挨在一起的等距间隔。两者可以套用：外 Flex 分两端，内 Space 排操作组。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| vertical | boolean | false | 垂直方向 |
| wrap | boolean | 'wrap' | 'nowrap' | 'wrap-reverse' | false | 是否换行 |
| justify | CSSProperties['justifyContent'] | 'normal' | 对应 justify-content |
| align | CSSProperties['alignItems'] | 'normal' | 对应 align-items |
| flex | string | 'normal' | flex 简写（如 '1', '0 0 auto'） |
| gap | string | number | — | 间距：small / middle / large 或数字 |
| component | string | 'div' | 渲染的标签 |