Flex

Thin abstraction over a flex div..

Mantine only sets the div to display:flex if no props are provided.

props:

the direction, horizontal by default. We often set vertical as a base for mobile, and switch back to horizontal on desktop. To match the flex's terminology: horizontal is row, while vertical is column.
the gap, defaults to 0, due to matching regular flex.
the justify, main axis alignment. Default to flex-start, due to matching regular flex.
the align, cross-axis alignment. Defaults to stretch, due to matching regular flex.

allow an attribute to pick a different value depending on screen size.

Instead of a single value, we provide an object with properties, most of the time only two properties.

The base property provides the mobile value. All iPhones are under 450p in width. All non-plus size iPhones are under 400p
The xs or sm property provides the value for bigger devices, similar to a min-width media query, which applies to either 576p (36em) aka phablets and higher or 768px (48em) aka tablets and higher. iPad tablets start at 768px. When setting the breakpoint at sm size, we allow the iPads to benefit from the desktop style.

<Flex
 direction=	{{ base: 'column',sm: 'row' }}
 gap=		{{ base: 'sm', 	sm: 'lg' }}
 justify=	{{ base: 'sm', 	sm: 'lg' }}
>

Flex

Thin abstraction over a flex div..

Mantine only sets the div to display:flex if no props are provided.

props:

the direction, horizontal by default. We often set vertical as a base for mobile, and switch back to horizontal on desktop. To match the flex's terminology: horizontal is row, while vertical is column.

the gap, defaults to 0, due to matching regular flex.

the justify, main axis alignment. Default to flex-start, due to matching regular flex.

the align, cross-axis alignment. Defaults to stretch, due to matching regular flex.

allow an attribute to pick a different value depending on screen size.

Instead of a single value, we provide an object with properties, most of the time only two properties.

The base property provides the mobile value. All iPhones are under 450p in width. All non-plus size iPhones are under 400p

The xs or sm property provides the value for bigger devices, similar to a min-width media query, which applies to either 576p (36em) aka phablets and higher or 768px (48em) aka tablets and higher. iPad tablets start at 768px. When setting the breakpoint at sm size, we allow the iPads to benefit from the desktop style.

<Flex direction= {{ base: 'column',sm: 'row' }} gap= {{ base: 'sm', sm: 'lg' }} justify= {{ base: 'sm', sm: 'lg' }} >