Flex

A flexbox row or column with alignment, gap, and size props.

When to use

Use Flex when you need a flexbox row or column with alignment, gap, and size props.

Import

TypeScript

import { Flex } from '@gzodo/ui'

Flex is a layout helper, not a visual control. Use it to line up a label and an action, or to stack fields. Values such as start and between map to the CSS flex keywords. gap, padding, and margin accept a number (pixels) or a string.

Examples

Left

Row

Default direction is row. align="center" centers on the cross axis. justify="between" pushes the ends apart.

Title

Supporting line

Column

direction="column" stacks children. gap is the space between them.

Wrap

wrap="wrap" lets items flow onto the next line when the row runs out of space.

72px tall

Size

fullWidth and fullHeight set 100%. Explicit width, height, min, and max override the automatic size.

Flex

Property

Description

Type

Default

direction

flex-direction.

'row' | 'row-reverse' | 'column' | 'column-reverse'

'row'

justify

justify-content.

'start'

align

align-items.

'start' | 'center' | 'end' | 'stretch' | 'baseline'

'start'

wrap

flex-wrap.

'nowrap' | 'wrap' | 'wrap-reverse'

'nowrap'

gap

Gap between items.

string | number

—

padding

Padding.

string | number

—

margin

Margin.

string | number

—

fullWidth

width: 100%.

boolean

—

fullHeight

height: 100%.

boolean

—

flex

CSS flex shorthand.

string

—

overflow

Overflow on both axes. overflowX and overflowY are separate.

'visible' | 'hidden' | 'scroll' | 'auto'

—

Skeleton

Container