Balance Logo
Balance
Reckon Design System

Flex

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

The Flex layout primitive is a thin abstraction of the CSS flex layout. Read "A Complete Guide to Flexbox" for an easy-to-consume and detailed outline of CSS' flex layout.

Parent props

Gap

We shim the gap property with margins to make it much easier to build layouts with consistent space between each item. Once Safari supports gap natively as a flex property, we can pass it straight through. Gap supports the theme's spacing values:

  • none (default)
  • xsmall
  • small
  • medium
  • large
  • xlarge
  • xxlarge
Open in Playroom

Align

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

  • center
  • end
  • start
  • stretch (default)

Justify

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:

  • around
  • between
  • center
  • end
  • even
  • start (default)
  • stretch

Orientation

The orientation prop maps to the flex direction CSS property, allowing us to maintain a consistent API among the design system primitives.

  • horizontal "row" (default)
  • vertical "column"

Inline

A boolean that determines if the flex container should receive the display property inline-flex or flex. Defaults to false.

<Flex inline={true} />

Child props

Basis

Define the initial main size of a flex item.

<Flex basis="0" />

See how basis affects the first item:

First
item
Second
item
Third
item

Grow

Define grow "factor" of a flex item. It accepts a unitless value, which dictates the amount of available space inside the flex container the item should take up.

<Flex grow="1" />

See how grow affects the first item:

First
item
Second
item
Third
item

Shrink

Define shrink "factor" of a flex item. It accepts a unitless value, which dictates the amount of available space inside the flex container the item should take up.

<Flex shrink="1" />

See how shrink affects the first item:

First
item
Second
item
Third
item

Shorthand

You can pass shorthand values directly to the CSS flex property.

<Flex shorthand="0 1 auto" />

Box Props

The Flex primitive implements Box so all props are inherited.

Props from the Box component are supported
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.