Layout
Flex
Storybook
Flex
Storybook
It is a flexible container that allows you to fit child elements in a single row or column, and to adjust their size and position.
Import
1import { Flex } from 'dd360-ds'1import Flex from 'dd360-ds/Flex'Usage
I am a children
1import { Flex } from 'dd360-ds'
2
3<Flex>I am a children</Flex>JustifyContent
Determine the alignment of flex and grid items along the primary axis.
1st element
2nd element
1import { Flex } from "dd360-ds"
2
3<Flex justifyContent="between">
4 <div className="bg-red-500 rounded-md p-2">1st element</div>
5 <div className="bg-blue-500 rounded-md p-2">2nd element</div>
6</Flex>
7AlignItems
Specify how flex and grid items are aligned along the cross axis.
1st element
2nd element
1import { Flex } from "dd360-ds"
2
3<Flex justifyContent="center" alignItems="center" gap="2">
4 <div className="bg-purple-500 rounded-md p-2">1st element</div>
5 <div className="bg-green-500 rounded-md p-2">2nd element</div>
6</Flex>
7API Reference
| Name | Types | Default |
|---|---|---|
| "children" | ReactNode | - |
| "className" | string | - |
| "alignItems" | start end center baseline stretch | - |
| "justifyContent" | start end center between around evenly | - |
| "gap" | 0 px 0.5 1 1.5 2 2.5 3 3.5 4 5 6 7 8 9 10 11 12 14 16 20 24 28 32 36 40 44 48 52 56 60 64 72 80 96 | - |