Flex API
API reference for the Flex component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.
Demos
For usage examples, visit the component demo page: Flex
Import
import { Flex } from '@soroush.tech/design-system/Flex'Flex-specific props
flexDirection
| Value | CSS |
|---|---|
"column" | flex-direction: column |
"row" | flex-direction: row |
"column-reverse" | flex-direction: column-reverse |
"row-reverse" | flex-direction: row-reverse |
Default: "column".
gap
Inherited from View. Resolves against theme.space. Maps to CSS gap.
| Key | CSS value |
|---|---|
0 | 0 |
0.5 | 4px |
1 | 8px |
1.5 | 12px |
2 | 16px |
3 | 24px |
4 | 32px |
5 | 40px |
6 | 48px |
7 | 56px |
8 | 64px |
"auto" | auto |
Flexbox props
| Prop | CSS property |
|---|---|
flexDirection | flex-direction |
justifyContent | justify-content |
alignItems | align-items |
alignContent | align-content |
flexWrap | flex-wrap |
flex | flex |
flexGrow | flex-grow |
flexShrink | flex-shrink |
flexBasis | flex-basis |
alignSelf | align-self |
justifySelf | justify-self |
order | order |
Inherited from View
See View props for the full list: space, layout, bg, border, and position props.
Source code
If this page does not answer your question, have a look at the implementation of the component for more detail.