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 sx={{ display: "flex" }}>…

flex-direction

<Box sx={{ flexDirection: "row" }}>…
<Box sx={{ flexDirection: "row-reverse" }}>…

flex-wrap

<Box sx={{ flexWrap: "nowrap" }}>…
<Box sx={{ flexWrap: "wrap" }}>…

justify-content

<Box sx={{ justifyContent: "flex-start" }}>…
<Box sx={{ justifyContent: "flex-end" }}>…
<Box sx={{ justifyContent: "center" }}>…

align-items

<Box sx={{ alignItems: "flex-start" }}>…
<Box sx={{ alignItems: "flex-end" }}>…
<Box sx={{ alignItems: "center" }}>…

align-content

<Box sx={{ alignContent: "flex-start" }}>…
<Box sx={{ alignContent: "flex-end" }}>…

Properties for the Children

order

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

flex-grow

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

flex-shrink

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

align-self

<Box>Item 1</Box>
<Box sx={{ alignSelf: "flex-end" }}>Item 2</Box>
<Box>Item 3</Box>

API

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