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

      • Flex

      Control direction, alignment, spacing and wrapping without adding wrappers around children.

      Basic usage

      Use gap for spacing and wrap to allow items to move onto another line.

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

export function FlexBasic() {
  return (
    <Flex gap="sm" wrap>
      <Button>Save</Button>
      <Button variant="outline">Cancel</Button>
      <Button variant="ghost">More actions</Button>
    </Flex>
  );
}

      Direction and alignment

      direction controls flow, align controls cross-axis alignment and justify controls main-axis alignment. start / end follow the corresponding flex axis.

      Project settings
      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>Project settings</Text>
        <Button size="sm">Save</Button>
      </Flex>
      <Flex justify="end" gap="sm" wrap>
        <Button variant="outline">Cancel</Button>
        <Button>Confirm</Button>
      </Flex>
    </Flex>
  );
}

      Flex API

      PropertyTypeDefaultDescription
      direction'row' | 'row-reverse' | 'column' | 'column-reverse''row'Flow direction. Reversing layout does not change DOM reading or keyboard order.
      gapnumber | string | readonly [number | string, number | string]0Numbers are px. Supports CSS lengths and themed sm / md / lg spacing. A pair means [row gap, column gap].
      align'start' | 'center' | 'end' | 'stretch' | 'baseline''stretch'Cross-axis alignment.
      justify'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly''start'Main-axis alignment.
      wrapboolean | 'nowrap' | 'wrap' | 'wrap-reverse'falseEnable wrapping or choose its direction.
      inlinebooleanfalseUse inline flex layout.

      Types

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

      FlexGap is number | string. Native div attributes, className, style and DOM refs are supported. Explicit style takes precedence over layout props.

      Usage notes

      Use Space for simple equal spacing, Flex for main-axis alignment, reversed flow or inline layout, and Grid for columns. Flex preserves the appearance and size of its children.