Flexbox

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

If you are new to or unfamiliar with flexbox, we encourage you to read this CSS-Tricks flexbox guide.

Properties for the Parent

display

I'm a flexbox container!

import React from 'react';
import Box from '@material-ui/core/Box';

export default function Display() {
  return (
    <div style={{ width: '100%' }}>
      <Box display="flex" p={1} bgcolor="background.paper">
        {"I'm a flexbox container!"}
      </Box>
    </div>
  );
}

<Box display="flex">…

flex-direction

Item 1

<Box flexDirection="row">…
<Box flexDirection="row-reverse">…

flex-wrap

Item 1

<Box flexWrap="nowrap">…
<Box flexWrap="wrap">…

justify-content

Item 1

<Box justifyContent="flex-start">…
<Box justifyContent="flex-end">…
<Box justifyContent="center">…

align-items

Item 1

<Box alignItems="flex-start">…
<Box alignItems="flex-end">…
<Box alignItems="center">…

align-content

Item 1

<Box alignContent="flex-start">…
<Box alignContent="flex-end">…

Properties for the Children

order

Item 1

Item 2

Item 3

<Box order={2}>Item 1</Box>
<Box order={3}>Item 2</Box>
<Box order={1}>Item 3</Box>

flex-grow

Item 1

Item 2

Item 3

<Box flexGrow={1}>Item 1</Box>
<Box>Item 2</Box>
<Box>Item 3</Box>

flex-shrink

Item 1

Item 2

Item 3

<Box width="100%">Item 1</Box>
<Box flexShrink={1}>Item 2</Box>
<Box flexShrink={0}>Item 3</Box>

align-self

Item 1

<Box>Item 1</Box>
<Box alignSelf="flex-end">Item 2</Box>
<Box>Item 3</Box>

API

import { flexbox } from '@material-ui/system';

Import name	Prop	CSS property	Theme key
`flexDirection`	`flexDirection`	`flex-direction`	none
`flexWrap`	`flexWrap`	`flex-wrap`	none
`justifyContent`	`justifyContent`	`justify-content`	none
`alignItems`	`alignItems`	`align-items`	none
`alignContent`	`alignContent`	`align-content`	none
`order`	`order`	`order`	none
`flex`	`flex`	`flex`	none
`flexGrow`	`flexGrow`	`flex-grow`	none
`flexShrink`	`flexShrink`	`flex-shrink`	none
`alignSelf`	`alignSelf`	`align-self`	none