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

<Box display="flex">…

flex-direction

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

flex-wrap

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

justify-content

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

align-items

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

align-content

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

Properties for the Children

order

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

flex-grow

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

flex-shrink

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

align-self

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

API

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