Flex

import { FLEX_STYLE_PROPS_DATA } from '@mantine/core'; import { FlexDemos } from '@docs/demos'; import { StylePropsTable } from '@/components/StylePropsTable'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Flex);

Usage

<Demo data={FlexDemos.configurator} />

Supported props

<StylePropsTable source={FLEX_STYLE_PROPS_DATA} />

Responsive props

Flex component props can have responsive values the same way as other style props:

<Demo data={FlexDemos.responsive} />

Difference from Group and Stack

The Flex component is an alternative to Group and Stack. Flex is more flexible – it allows creating both horizontal and vertical flexbox layouts, but requires more configuration. Unlike Group and Stack, Flex is polymorphic and supports responsive props.

<DataTable head={['', 'Group', 'Stack', 'Flex']} data={[ ['Direction', 'horizontal', 'vertical', 'both'], ['Equal width children', '✅', '❌', '❌'], ['flex-wrap support', '✅', '❌', '✅'], ['Responsive flexbox props', '❌', '❌', '✅'], ['Polymorphic component', '❌', '❌', '✅'], ]} />

<FlexboxGapSupport component="Flex" />