Skip to content
raft-ui
中文

Flex

Flex lays out its children in a row or a column with an even gap between them. The named gaps come from the theme, so a toolbar or a form row keeps the same rhythm as the rest of the page. It is layout only: it draws nothing of its own.

Demos

Basic

A row that wraps when it runs out of room, with the medium gap.

Vertical and reverse

vertical stacks the items in a column; reverse flips their order in either direction.

vertical

1
2
3

vertical reverse

1
2
3

reverse

1
2
3

Size

size takes a theme gap (small, medium, large), one number in px for both directions, or [horizontal, vertical] in px.

size="small"

1
2
3
4
5
6
7
8

size="medium"

1
2
3
4
5
6
7
8

size="large"

1
2
3
4
5
6
7
8

size={24}

1
2
3
4
5
6
7
8

size={[32, 4]}

1
2
3
4
5
6
7
8

Justify and align

justify distributes the items along the row, align lines them up across it. Try the combinations on items of different heights.

justify
align
1
2
3
4

Wrap

Items wrap onto new lines by default. With wrap={false} they stay on one line; here the items are allowed to shrink to fit. Vertical layouts never wrap.

wrap (default)

1
2
3
4
5
6
7
8

wrap={false}

1
2
3
4
5
6
7
8

Inline

inline makes the container inline-flex, so a small group can sit inside a line of text.

Pick an action
and keep reading on the same line.

Props

NameTypeDefaultDescriptionVersion
sizesmall | medium | large | number | [number, number]mediumThe gap between items: a theme gap, px for both directions, or [horizontal, vertical] in px.Unreleased
justifystart | end | center | flex-start | flex-end | space-between | space-around | space-evenlystartHow items are distributed along the main axis (justify-content).Unreleased
alignstart | end | center | baseline | stretchundefinedHow items line up across the main axis (align-items). Unset keeps the CSS default, which stretches them.Unreleased
verticalbooleanfalseStacks items in a column.Unreleased
reversebooleanfalseReverses the order of the items.Unreleased
wrapbooleantrueWraps items onto new lines when they run out of room. Ignored when vertical.Unreleased
inlinebooleanfalseUses inline-flex instead of flex.Unreleased
childrenReactNodeundefinedThe items. With no children, Flex renders nothing.Unreleased

Flex renders a div and also accepts native div attributes and a ref. It adds no role; when the items form a group, such as a set of related actions, give it role="group" and an aria-label.

The named gaps are the --r-flex-gap-small, --r-flex-gap-medium and --r-flex-gap-large theme tokens, each a CSS gap value (row, then column).