For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/flex.md.
Leaf UIReact 组件库
GitHub

Flex 弹性布局

控制内容的排列方向、对齐、间距与换行，不为子元素添加额外容器。

基础用法

通过 gap 设置间距，wrap 允许内容在空间不足时换行。

basic.tsx
import { Button, Flex } from '@ifhover/leaf-ui';

export function FlexBasic() {
  return (
    <Flex gap="sm" wrap>
      <Button>保存</Button>
      <Button variant="outline">取消</Button>
      <Button variant="soft">更多操作</Button>
    </Flex>
  );
}

方向与对齐

direction 控制排列方向，align 控制交叉轴对齐，justify 控制主轴对齐；start / end 跟随对应弹性轴的方向。

项目设置
alignment.tsx
import { Button, Flex, Text } from '@ifhover/leaf-ui';

export function FlexAlignment() {
  return (
    <Flex direction="column" gap="lg">
      <Flex justify="space-between" align="center" gap="sm" wrap>
        <Text>项目设置</Text>
        <Button size="sm">保存</Button>
      </Flex>
      <Flex justify="end" gap="sm" wrap>
        <Button variant="outline">取消</Button>
        <Button>确认</Button>
      </Flex>
    </Flex>
  );
}

Flex API

属性类型默认值说明
direction'row' | 'row-reverse' | 'column' | 'column-reverse''row'排列方向。反向排列不改变 DOM 阅读与键盘顺序。
gapnumber | string | readonly [number | string, number | string]0间距；数字为 px，支持 CSS 长度和 sm / md / lg 主题间距。数组为 [行间距, 列间距]。
align'start' | 'center' | 'end' | 'stretch' | 'baseline''stretch'交叉轴对齐。
justify'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly''start'主轴对齐。
wrapboolean | 'nowrap' | 'wrap' | 'wrap-reverse'false是否换行或具体换行方向。
inlinebooleanfalse使用行内弹性布局。

类型

import type { FlexGap, FlexProps } from '@ifhover/leaf-ui';

FlexGap 为 number | string。组件支持原生 div 属性、className、style 和 DOM ref；显式 style 优先于布局属性。

使用说明

简单等间距排列可使用 Space；需要主轴对齐、反向排列或行内布局时使用 Flex；多列布局使用 Grid。Flex 不改变子元素的外观和尺寸。