react-test/docs/data/system/flexbox/flexbox.md

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

{{"demo": "Display.js", "defaultCodeOpen": false, "bg": true}}

<Box sx={{ display: 'flex' }}>…
<Box sx={{ display: 'inline-flex' }}>…

flex-direction

For more information please see flex-direction on MDN.

{{"demo": "FlexDirection.js", "defaultCodeOpen": false, "bg": true}}

<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.

{{"demo": "FlexWrap.js", "defaultCodeOpen": false, "bg": true}}

<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'wrap' }}>…
<Box sx={{ flexWrap: 'wrap-reverse' }}>…

justify-content

For more information please see justify-content on MDN.

{{"demo": "JustifyContent.js", "defaultCodeOpen": false, "bg": true}}

<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.

{{"demo": "AlignItems.js", "defaultCodeOpen": false, "bg": true}}

<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.

{{"demo": "AlignContent.js", "defaultCodeOpen": false, "bg": true}}

<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.

{{"demo": "Order.js", "defaultCodeOpen": false, "bg": true}}

<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.

{{"demo": "FlexGrow.js", "defaultCodeOpen": false, "bg": true}}

<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.

{{"demo": "FlexShrink.js", "defaultCodeOpen": false, "bg": true}}

<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.

{{"demo": "AlignSelf.js", "defaultCodeOpen": false, "bg": true}}

<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