> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/flex.html

> 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.

# 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.


SaveCancelMore actions

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/flex/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>
  );
}
```

Expand code

## 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 settingsSave

CancelConfirm

alignment.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/flex/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>
  );
}
```

Expand code

## Flex API

| Property    | Type                                                                                  | Default     | Description                                                                                                      |
| ----------- | ------------------------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |
| `direction` | `'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`                              | `'row'`     | Flow direction. Reversing layout does not change DOM reading or keyboard order.                                  |
| `gap`       | `number \| string \| readonly [number \| string, number \| string]`                   | `0`         | Numbers 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.                                                                                             |
| `wrap`      | `boolean \| 'nowrap' \| 'wrap' \| 'wrap-reverse'`                                     | `false`     | Enable wrapping or choose its direction.                                                                         |
| `inline`    | `boolean`                                                                             | `false`     | Use inline flex layout.                                                                                          |

## Types

```ts
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.