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

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="soft">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.