Flex 弹性布局

基于 CSS Flexbox 的布局容器，通过属性控制方向、主轴/交叉轴对齐、间距与换行。

基础用法

水平与间距

标签一标签二标签三

示例代码

方向

vertical 简写等价于 direction="vertical"（纵向堆叠）。

垂直方向

纵向排布从上到下间距可调

示例代码

direction 等价写法

direction="vertical"与 vertical 一致

示例代码

主轴对齐

主轴对齐 justify 全枚举

justify="start"（默认）123justify="center"123justify="end"123justify="between"123justify="around"123justify="evenly"123

示例代码

交叉轴对齐

交叉轴对齐 align 全枚举

align="stretch"（默认）按钮标签align="start"按钮标签align="center"按钮标签align="end"按钮标签align="baseline"按钮标签

示例代码

固定高度 80px 容器 + 不同高度子项（按钮 32px / 标签 20px），用于观察各 align 变体的交叉轴对齐差异；stretch 会把子项拉伸至容器高度。

换行

wrap 为布尔属性：存在即 flex-wrap: wrap，缺省 nowrap。

换行 wrap

12345678910

示例代码

子项填满

fill 让子项等分填满容器（flex: 1 等价物）；fill-ratio（百分比，默认 100）按比例分配——子项自身可设置，容器级 fill-ratio 作为缺省。

fill 子项等分填满

一

二

三

示例代码

fill-ratio 按比例分配

1

2（200%）

3

容器级缺省 300%

同样 300%

示例代码

关于子项 order：oas-flex 无子项组件载体（子元素是任意宿主元素），逐子项设 order 没有合理 API，故本版本不做子项排序。若后续出现 oas-flex-item 子项组件场景（排序/基准尺寸等逐子项能力），再按需引入。

响应式

direction 与 gap 支持断点简写：空格分隔的基础值 + 若干 断点:值（如 direction="column md:row"、gap="8px md:16px"）。窗口在断点宽度以下时用基础值，达到断点宽度（移动优先 min-width）后切到断点值。

断点表：

断点	宽度
sm	640px
md	768px
lg	1024px
xl	1280px

方向响应式：窄屏竖排、md 起横排

按钮 1按钮 2按钮 3

示例代码

间距响应式：8px 起、md 起 24px

123456

示例代码

拖窄浏览器窗口可观察 direction 从横排切回竖排、间距收紧的过程。

空容器

无子元素时高度为 0，不报错、不占位。

空容器

示例代码

API

oas-flex

属性

属性	说明	类型	默认值
align	交叉轴对齐	string	stretch
direction	主轴方向；支持断点简写：空格分隔的基础值 + 若干 断点:值（如 column md:row），断点表 sm=640px / md=768px / lg=1024px / xl=1280px（移动优先 min-width），低于断点用基础值；非法断点名/值回落基础值并告警	string	row
fill	子项等分填满容器（flex: 1 等价物）	boolean	—
fill-ratio	配合 fill 的分配比例（百分比，默认 100）：子项自身可设、容器级作缺省	string	—
gap	子项间距；支持断点简写（如 8px md:16px，断点表同 direction）	string	—
justify	主轴对齐：start/center/end/between/around/evenly（与 flex-*/space-* 旧枚举双向兼容）	string	start
vertical	纵向简写（= direction:column，优先于 direction）	boolean	—
wrap	换行	boolean	—

插槽

名称	说明
默认	弹性布局子项

CSS 变量

CSS 变量	默认值
--oas-flex-direction	${dirBase}
--oas-flex-gap	${toLen(gapShorthand.base) || 'normal'}