Flexbox
借助一整套的响应式 flex 的小方法，实现快速地管理布局，对齐，网格栏的大小，导航，组件等等。
若你对 flexbox 不太熟悉，我们建议你阅读 CSS-Tricks flexbox 手册。
父元素的属性
display
I'm a flexbox container that uses flex!
I'm a flexbox container that uses inline-flex!
<Box sx={{ display: 'flex' }}>…
<Box sx={{ display: 'flex' }}>…
<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
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row-reverse' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row-reverse' }}>…
<Box sx={{ flexDirection: 'column' }}>…
<Box sx={{ flexDirection: 'column-reverse' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row-reverse' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row-reverse' }}>…
<Box sx={{ flexDirection: 'column' }}>…
<Box sx={{ flexDirection: 'column-reverse' }}>…
<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
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'wrap' }}>…
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'wrap' }}>…
<Box sx={{ flexWrap: 'wrap-reverse' }}>…
<Box sx={{ flexWrap: 'wrap-reverse' }}>…
<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
<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' }}>…
<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
<Box sx={{ alignItems: 'flex-start' }}>…
<Box sx={{ alignItems: 'flex-end' }}>…
<Box sx={{ alignItems: 'center' }}>…
<Box sx={{ alignItems: 'stretch' }}>…
<Box sx={{ alignItems: 'baseline' }}>…
<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
<Box sx={{ alignContent: 'flex-start' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'center' }}>…
<Box sx={{ alignContent: 'space-between' }}>…
<Box sx={{ alignContent: 'space-around' }}>…
<Box sx={{ alignContent: 'stretch' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'center' }}>…
<Box sx={{ alignContent: 'flex-start' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'center' }}>…
<Box sx={{ alignContent: 'space-between' }}>…
<Box sx={{ alignContent: 'space-around' }}>…
<Box sx={{ alignContent: 'stretch' }}>…
<Box sx={{ alignContent: 'flex-end' }}>…
<Box sx={{ alignContent: 'center' }}>…
<Box sx={{ alignContent: 'space-between' }}>…
<Box sx={{ alignContent: 'space-around' }}>…
<Box sx={{ alignContent: 'stretch' }}>…
<Box sx={{ alignContent: 'space-around' }}>…
<Box sx={{ alignContent: 'stretch' }}>…
子元素的属性
order
For more information please see order on MDN.
Item 1
Item 2
Item 3
<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
<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
<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
<Box>Item 1</Box>
<Box sx={{ alignSelf: 'flex-end' }}>Item 2</Box>
<Box>Item 3</Box>
API
import { flexbox } from '@material-ui/system';
| 导入名称 | 属性 | CSS 属性 | 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 |