Flex

Compose elements in a flex container

Import

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>
  );
}

Go back

Container – @mantine/core

Up next

Grid – @mantine/core

Flex component props

Name	Type	Description
align	SystemProp<AlignItems>	align-items CSS property
columnGap	SystemProp<SpacingValue>	column-gap CSS property
direction	SystemProp<FlexDirection>	flex-direction CSS property
gap	SystemProp<SpacingValue>	gap CSS property
justify	SystemProp<JustifyContent>	justify-content CSS property
rowGap	SystemProp<SpacingValue>	row-gap CSS property
wrap	SystemProp<FlexWrap>	flex-wrap CSS property

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter