Flex 弹性布局
布局组件
弹性布局 — Chaos UI 的布局组件,用于组织页面区域结构。
何时使用
需要弹性布局功能时使用本组件。
代码示例
基础用法
tsx
import { Flex } from "@/components/ui/flex"
export function Basic() {
return <Flex>Default</Flex>
}样式变体
方向
| direction | 说明 | 默认 |
|---|---|---|
row | ✓ | |
column | ||
row-reverse | ||
column-reverse |
wrap
| wrap | 说明 | 默认 |
|---|---|---|
nowrap | ✓ | |
wrap | ||
wrap-reverse |
主轴对齐
| justify | 说明 | 默认 |
|---|---|---|
start | ✓ | |
center | ||
end | ||
between | ||
around | ||
evenly |
对齐
| align | 说明 | 默认 |
|---|---|---|
start | ||
center | ||
end | ||
baseline | ||
stretch | ✓ |
gap
| gap | 说明 | 默认 |
|---|---|---|
none | ✓ | |
xs | ||
sm | ||
md | ||
lg | ||
xl |
API / Props
Flex
| Prop | Type | Default | 说明 |
|---|---|---|---|
className | string | — | 自定义样式类名 |
| ...rest | React.ComponentProps<"div"> | — | 透传 <div> 原生属性 |
注意事项
- CVA 变体: 通过
class-variance-authority管理样式变体,类型安全。变体对象可导出复用。 - 原生属性: 继承所有
<div>原生 HTML 属性。
📘 完整交互式示例与控件属性请查看 Storybook 文档。