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 | Default | Description |
|---|---|---|
| direction: 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'row' | Sets flex-direction CSS property. See MDN for further information. |
| justifyContent: 'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'right' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'flex-start' | Sets justify-content CSS property. See MDN for further information. |
| alignItems: 'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | 'baseline' | 'stretch' | Sets align-items CSS property. See MDN for further information. |
| alignContent: 'normal' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-evenly' | 'stretch' | 'normal' | Sets align-content CSS property. See MDN for further information. |
| alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | 'auto' | Sets align-self CSS property. See MDN for further information. |
| wrap: 'nowrap' | 'wrap' | 'wrap-reverse' | 'nowrap' | Sets flex-wrap CSS property. See MDN for further information. |
| gap: '0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap | '0rem' | Sets gap CSS property. See MDN for further information. |
| grow: number | 0 | Sets flex-grow CSS property. See MDN for further information. |
| shrink: number | 1 | Sets flex-shrink CSS property. See MDN for further information. |
| order: number | 0 | Sets order CSS property. See MDN for further information. |
| basis: string | 'auto' | Sets flex-basis CSS property. See MDN for further information. |
| as: keyof HTMLElementTagNameMap | 'div' | Sets a custom HTML tag. |
| children: node | Custom content inside the flex container. |