Balance Logo
Balance
Reckon Design System
Open playroom

Flex

The flex primitive extends the box primitive, with properties to influence CSS flex attributes.
Install
pnpm add @balance-web/flex
Import usage
import {
Flex
} from '@balance-web/flex';
  • Code
  • API

The Flex layout primitive is a thin abstraction over the CSS flexbox layout.

Alternatives

  • Stack — For vertical layouts
  • Inline — For horizontal layouts, with fluid child widths that may wrap
  • Columns — For horizontal layouts, with prescriptive and exact child widths

Usage

Gap

The spacing between children can be adjusted using the gap prop.

Edit in Playroom

Align items

The align prop maps to the align-items CSS property, and defines the alignment of items along the cross-axis of the flex container.

Justify content

The justify prop maps to the justify-content CSS property, and defines the distribution of space between items along the main-axis of the flex container.

Direction

Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Inline

Display as an inline-level flex container.

<Flex inline={true} />

Wrap

Allow flex items to flow onto multiple lines.

<Flex wrap={true} />

Box Props

The Flex primitive implements Box so all props are inherited.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo