#Flex

A flex container with the properties as props — direction, justify, align, wrap, plus basis fractions and grow / shrink for how the children size themselves. Reach for Stack, or HStack / VStack, when all you want is a spaced list in one direction: Stack carries a default gap where Flex has none. Flex takes no className, so everything goes through props.

Source · Storybook

#Usage

import { Flex } from '@wallarm-org/design-system/Flex';

#Examples

#Direction

row, column and row-reverse. Reverse changes the paint order without touching the DOM order, so it moves the visual sequence away from the tab order — use it sparingly.

#Alignment

justify distributes along the main axis, and needs fullWidth (or a sized parent) to have any room to distribute in.

#Wrap

wrap lets the row break onto more lines once it runs out of width, which is what keeps a long row of chips or tags from overflowing.

#Grow shrink

How the children behave when the space does not fit: growing to fill it, or shrinking to survive it. basis is the third lever, for a child that should start at a fraction of the row.

#Props