Flexbox

Flexbox

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

The documentation page is highly inspired by A Complete Guide to Flexbox. We highly encourage you to read and memorize it.

Properties for the Parent

display

<Box display="flex">
I'm a flexbox container!

flex-direction

<Box flexDirection="row"><Box flexDirection="row-reverse">
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1

flex-wrap

<Box flexWrap="nowrap"><Box flexWrap="wrap">
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1

justify-content

<Box justifyContent="flex-start"><Box justifyContent="center"><Box justifyContent="flex-end">
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1

align-items

<Box alignItems="flex-start"><Box alignItems="flex-end"><Box alignItems="center">
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1

align-content

<Box alignContent="flex-start"><Box alignContent="flex-end">
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1

Properties for the Children

order

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

flex-grow

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

flex-shrink

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

align-self

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

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