Flex

A utility component for creating flexible box layouts using the CSS Flexbox specification.

Report Issue Github

Usage

Use the Flex component to quickly create responsive layouts with flexible items. Adjust the spacing, alignment, and direction for fine-tuned control over your layouts.

Basic Layout

Flexbox container with a basic row layout.


<Flex>
  <Card>
    <Card.Header title={'Item 1'} />
  </Card>
  <Card>
    <Card.Header title={'Item 2'} />
  </Card>
</Flex>

Column Layout

Flexbox container with a column layout and aligned items.


<Flex direction="column" align="center" justify="space-between">
  <Card>
    <Card.Header title={'Item 1'} />
  </Card>
  <Card>
    <Card.Header title={'Item 2'} />
  </Card>
</Flex>

Custom Spacing and Alignment

Flexbox container with custom spacing and alignment.


<Flex space={4} align="center" justify="center">
  <Card>
    <Card.Header title={'Item 1'} />
  </Card>
  <Card>
    <Card.Header title={'Item 2'} />
  </Card>
</Flex>

API

Props

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`direction`	`'row' \| 'column'`	`'row'`	-
`space`	`SpaceValue`	`2`	-
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	`'start'`	-
`justify`	`'start' \| 'center' \| 'end' \| 'space-between' \| 'around' \| 'space-evenly'`	`'start'`	-
`MarginProps`	`Token<MarginProps>`	-	-
`PaddingProps`	`Token<PaddingProps>`	-	-
`LayoutProps`	`Token<LayoutProps>`	-	-

Divider

Grid