Flex 弹性布局

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

基础用法

水平与间距

标签一标签二标签三

示例代码

方向

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

垂直方向

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

示例代码

direction 等价写法

direction="vertical"与 vertical 一致

示例代码

主轴对齐

主轴对齐 justify 全枚举

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

示例代码

交叉轴对齐

交叉轴对齐 align 全枚举

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

示例代码

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

换行

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

换行 wrap

12345678910

示例代码

空容器

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

空容器

示例代码

API

属性

属性	说明	类型	默认值
align	交叉轴对齐	string	stretch
direction	主轴方向	string	row
gap	子项间距	string	—
justify	主轴对齐	string	start
vertical	纵向简写	boolean	—
wrap	换行	boolean	—

插槽

名称	说明
默认	—