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' | 'normal' | 'right' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | Sets justify-content CSS property. See MDN for further information. | 'normal' |
| alignItems | 'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | 'baseline' | 'normal' | Sets align-items CSS property. See MDN for further information. | 'normal' |
| 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' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem' | 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:
| - |
| 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 children | React.ReactNode | Custom content inside the flex container. | - |
() => { return ( <DxcInset space="2rem"> <DxcFlex direction="column" alignItems="center" gap="2rem"> <DxcFlex alignSelf="flex-end" > <Placeholder width="100px" height="50px" /> <Placeholder width="100px" height="50px" /> </DxcFlex> <Placeholder width="150px" height="50px" /> <Placeholder width="150px" height="50px" /> </DxcFlex> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcFlex gap="0.5rem"> <DxcFlex order={3} grow={1}> <Placeholder width="100%">3</Placeholder> </DxcFlex> <DxcFlex order={2} grow={2}> <Placeholder width="100%">2</Placeholder> </DxcFlex> <DxcFlex order={1} grow={1}> <Placeholder width="100%">1</Placeholder> </DxcFlex> <DxcFlex order={5} grow={4}> <Placeholder width="100%">5</Placeholder> </DxcFlex> <DxcFlex order={4} grow={1}> <Placeholder width="100%">4</Placeholder> </DxcFlex> </DxcFlex> </DxcInset> ); }