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 that uses flex!
I'm a flexbox container that uses inline-flex!
import Box from '@mui/material/Box';
export default function Display() {
return (
<div style={{ width: '100%' }}>
<Box
sx={[
(theme) => ({
display: 'flex',
m: 1,
p: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
]}
>
{"I'm a flexbox container that uses flex!"}
</Box>
<Box
sx={(theme) => ({
display: 'inline-flex',
m: 1,
p: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
{"I'm a flexbox container that uses inline-flex!"}
</Box>
</div>
);
}
<Box sx={{ display: 'flex' }}>…
<Box sx={{ display: 'inline-flex' }}>…
flex-direction
For more information please see flex-direction on MDN.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function FlexDirection() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'row-reverse',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'flex-start',
flexDirection: 'column',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column-reverse',
alignItems: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row-reverse' }}>…
<Box sx={{ flexDirection: 'column' }}>…
<Box sx={{ flexDirection: 'column-reverse' }}>…
flex-wrap
For more information please see flex-wrap on MDN.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function FlexWrap() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
flexWrap: 'nowrap',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 300,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 300,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap-reverse',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 300,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
</Box>
</div>
);
}
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'wrap' }}>…
<Box sx={{ flexWrap: 'wrap-reverse' }}>…
justify-content
For more information please see justify-content on MDN.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function JustifyContent() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-around',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-evenly',
p: 1,
m: 1,
bgcolor: 'background.paper',
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
<Box sx={{ justifyContent: 'flex-start' }}>…
<Box sx={{ justifyContent: 'flex-end' }}>…
<Box sx={{ justifyContent: 'center' }}>…
<Box sx={{ justifyContent: 'space-between' }}>…
<Box sx={{ justifyContent: 'space-around' }}>…
<Box sx={{ justifyContent: 'space-evenly' }}>…
align-items
For more information please see align-items on MDN.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function AlignItems() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
alignItems: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'flex-end',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'stretch',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 100,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'baseline',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 116,
borderRadius: 1,
}}
>
<Item sx={{ height: 64 }}>Item 1</Item>
<Item sx={{ height: 84 }}>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
<Box sx={{ alignItems: 'flex-start' }}>…
<Box sx={{ alignItems: 'flex-end' }}>…
<Box sx={{ alignItems: 'center' }}>…
<Box sx={{ alignItems: 'stretch' }}>…
<Box sx={{ alignItems: 'baseline' }}>…
align-content
For more information please see align-content on MDN.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function AlignContent() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'flex-end',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'center',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'space-between',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'space-around',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignContent: 'stretch',
p: 1,
m: 1,
bgcolor: 'background.paper',
maxWidth: 380,
height: 200,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
<Item>Item 4</Item>
<Item>Item 5</Item>
<Item>Item 6</Item>
<Item>Item 7</Item>
</Box>
</div>
);
}
<Box sx={{ alignContent: 'flex-start' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'center' }}>…
<Box sx={{ alignContent: 'space-between' }}>…
<Box sx={{ alignContent: 'space-around' }}>…
<Box sx={{ alignContent: 'stretch' }}>…
Properties for the Children
order
For more information please see order on MDN.
Item 1
Item 2
Item 3
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function Order() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{ display: 'flex', p: 1, bgcolor: 'background.paper', borderRadius: 1 }}
>
<Item sx={{ order: 2 }}>Item 1</Item>
<Item sx={{ order: 3 }}>Item 2</Item>
<Item sx={{ order: 1 }}>Item 3</Item>
</Box>
</div>
);
}
<Box sx={{ order: 2 }}>Item 1</Box>
<Box sx={{ order: 3 }}>Item 2</Box>
<Box sx={{ order: 1 }}>Item 3</Box>
flex-grow
For more information please see flex-grow on MDN.
Item 1
Item 2
Item 3
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function FlexGrow() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{ display: 'flex', p: 1, bgcolor: 'background.paper', borderRadius: 1 }}
>
<Item sx={{ flexGrow: 1 }}>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
<Box sx={{ flexGrow: 1 }}>Item 1</Box>
<Box>Item 2</Box>
<Box>Item 3</Box>
flex-shrink
For more information please see flex-shrink on MDN.
Item 1
Item 2
Item 3
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function FlexShrink() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{ display: 'flex', p: 1, bgcolor: 'background.paper', borderRadius: 1 }}
>
<Item sx={{ width: '100%' }}>Item 1</Item>
<Item sx={{ flexShrink: 1 }}>Item 2</Item>
<Item sx={{ flexShrink: 0 }}>Item 3</Item>
</Box>
</div>
);
}
<Box sx={{ width: '100%' }}>Item 1</Box>
<Box sx={{ flexShrink: 1 }}>Item 2</Box>
<Box sx={{ flexShrink: 0 }}>Item 3</Box>
align-self
For more information please see align-self on MDN.
Item 1
Item 2
Item 3
import Box from '@mui/material/Box';
import type { BoxProps } from '@mui/material/Box';
function Item(props: BoxProps) {
const { sx, ...other } = props;
return (
<Box
sx={[
(theme) => ({
p: 1,
m: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
]}
{...other}
/>
);
}
export default function AlignSelf() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'flex',
alignItems: 'flex-start',
p: 1,
m: 1,
bgcolor: 'background.paper',
height: 124,
borderRadius: 1,
}}
>
<Item>Item 1</Item>
<Item sx={{ alignSelf: 'flex-end' }}>Item 2</Item>
<Item>Item 3</Item>
</Box>
</div>
);
}
<Box>Item 1</Box>
<Box sx={{ alignSelf: 'flex-end' }}>Item 2</Box>
<Box>Item 3</Box>
API
import { flexbox } from '@mui/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 |