# flex-layout LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/flex-layout` 的使用方式。

## 模块定位

flex布局，主要用于Flex结构性布局

## 导入方式

```ts
import { FlexLayout } from '@flatbiz/antd/flex-layout';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `FlexLayout` - flex布局，主要用于Flex结构性布局
- `FlexLayoutProps`
- `* from ./flex-layout.jsx`

## Props / 配置要点

### FlexLayoutProps

- `className`（可选）：: string
- `fullIndex`（必填）：: number | number[]；子组件铺满的索引值，从0开始
- `direction`（可选）：: 'vertical' | 'horizontal'；方向，默认值vertical
- `onClick`（可选）：: (event: React.MouseEvent<HTMLDivElement>) => void
- `style`（可选）：: CSSProperties
- `gap`（可选）：: number；间隙尺寸
- `children`（可选）：: ReactNode | null | Array<ReactNode | null>

## 使用规则与行为

- 子组件铺满的索引值，从0开始
- 方向，默认值vertical
- 间隙尺寸
- flex布局，主要用于Flex结构性布局

## 基础示例

```tsx
import { FlexLayout, type FlexLayoutProps } from '@flatbiz/antd/flex-layout';

const props: FlexLayoutProps = {
  // 按业务传入必要参数
};

<FlexLayout {...props} />;
```

## 源码索引

- `src/flex-layout/flex-layout.tsx`
- `src/flex-layout/index.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/flex-layout` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。