Flex

Compose elements in a flex container

Import

Usage

Gap
import { Flex, Button } from '@mantine/core';

function Demo() {
  return (
    <Flex
      mih={50}
      bg="rgba(0, 0, 0, .3)"
      gap="md"
      justify="flex-start"
      align="flex-start"
      direction="row"
      wrap="wrap"
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

Supported props

PropCSS PropertyTheme key
gap
gap
theme.spacing
rowGap
rowGap
theme.spacing
columnGap
columnGap
theme.spacing
align
alignItems
justify
justifyContent
wrap
flexWrap
direction
flexDirection

Responsive props

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

import { Flex, Button } from '@mantine/core';

function Demo() {
  return (
    <Flex
      direction={{ base: 'column', sm: 'row' }}
      gap={{ base: 'sm', sm: 'lg' }}
      justify={{ sm: 'center' }}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

Difference from Group and Stack

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.

GroupStackFlex
Directionhorizontalverticalboth
Equal width children
flex-wrap support
Responsive flexbox props
Polymorphic component

Browser support

Flex uses flexbox gap to add spacing between children. In older browsers, Flex children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.