Flex
Flex allows users to build Flexible Box Module based layouts. It serves as a technical component that abstracts users from working directly with CSS Flexbox and helps them write more semantic layouts.
| Name | Type | Description | Default |
|---|---|---|---|
| direction | 'row' | 'row-reverse' | 'column' | 'column-reverse' | Sets flex-direction CSS property. See MDN for further information. | 'row' |
| justifyContent | 'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'right' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | Sets justify-content CSS property. See MDN for further information. | 'flex-start' |
| alignItems | 'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | 'baseline' | Sets align-items CSS property. See MDN for further information. | 'stretch' |
| alignContent | 'normal' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-evenly' | 'stretch' | Sets align-content CSS property. See MDN for further information. | 'normal' |
| alignSelf | 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | Sets align-self CSS property. See MDN for further information. | 'auto' |
| wrap | 'nowrap' | 'wrap' | 'wrap-reverse' | Sets flex-wrap CSS property. See MDN for further information. | 'nowrap' |
| gap | '0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap | Sets gap CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
| '0rem' |
| grow | number | Sets flex-grow CSS property. See MDN for further information. | 0 |
| shrink | number | Sets flex-shrink CSS property. See MDN for further information. | 1 |
| order | number | Sets order CSS property. See MDN for further information. | 0 |
| basis | string | Sets flex-basis CSS property. See MDN for further information. | 'auto' |
| as | keyof HTMLElementTagNameMap | Sets a custom HTML tag. | 'div' |
Required | React.ReactNode | Custom content inside the flex container. | - |