Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

Flex

Flex is a Box with display: flex and comes with helpful style shorthand props.

Import

Usage

Flex provides the following style shorthand props:

Shorthand PropStyle PropCSS PropertyDescription
directionflexDirectionflex-directionSets how flex items are placed in the flex container.
wrapflexWrapflex-wrapSets whether flex items are forced onto one line or can wrap onto multiple lines.
alignalignItemsalign-itemsSets the align-self value on all direct children as a group.
justifyjustifyContentjustify-contentDefines how the browser distributes space between and around content items along the main axis of a flex container.

Flex items

You can use the flex property to set how a flex item will grow or shrink to fit the available space in its flex container. It is a shorthand for flex-grow, flex-shrink, and flex-basis. For most purposes, you should set flex to one of the following values: auto, initial, none, or a positive unitless number.

Values

initial

The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting flex: 0 1 auto.

auto

The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.

none

The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting flex: 0 0 auto.

To see the effect of these values, try resizing the flex containers below:

EDITABLE EXAMPLE

The direction (flexDirection) property

EDITABLE EXAMPLE

The wrap (flexWrap) property

EDITABLE EXAMPLE

The align (alignItems) property

EDITABLE EXAMPLE

The justify (justifyContent) property

EDITABLE EXAMPLE