For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/components/flex.md.
Leaf UI
  • 简体中文

      • 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="ghost">更多操作</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 不改变子元素的外观和尺寸。