Flex

Compose elements in a flex container

Polymorphic

Polymorphic component

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Gap

Justify

Align

Direction

Wrap

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

Prop	CSS Property	Theme 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.

	Group	Stack	Flex
Direction	horizontal	vertical	both
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.

Container

Grid