Flexbox
使用全套响应式 flexbox 工具，快速管理网格列、导航、组件等的布局、对齐和尺寸。
如果您不熟悉 flexbox 或刚接触 flexbox，我们建议您阅读这篇 CSS-Tricks flexbox 指南。
父容器的属性
display
我是一个使用 flex 的 flexbox 容器！
我是一个使用 inline-flex 的 flexbox 容器！
<Box sx={{ display: 'flex' }}>…
<Box sx={{ display: 'inline-flex' }}>…
flex-direction
更多信息请参阅 MDN 上的 flex-direction。
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ flexDirection: 'row-reverse' }}>…
<Box sx={{ flexDirection: 'column' }}>…
<Box sx={{ flexDirection: 'column-reverse' }}>…
flex-wrap
更多信息请参阅 MDN 上的 flex-wrap。
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box sx={{ flexWrap: 'wrap' }}>…
<Box sx={{ flexWrap: 'wrap-reverse' }}>…
justify-content
更多信息请参阅 MDN 上的 justify-content。
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 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' }}>…
align-items
更多信息请参阅 MDN 上的 align-items。
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
项目 1
项目 2
项目 3
<Box sx={{ alignItems: 'flex-start' }}>…
<Box sx={{ alignItems: 'flex-end' }}>…
<Box sx={{ alignItems: 'center' }}>…
<Box sx={{ alignItems: 'stretch' }}>…
<Box sx={{ alignItems: 'baseline' }}>…
align-content
更多信息请参阅 MDN 上的 align-content。
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
<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' }}>…
子元素的属性
order
更多信息请参阅 MDN 上的 order。
项目 1
项目 2
项目 3
<Box sx={{ order: 2 }}>Item 1</Box>
<Box sx={{ order: 3 }}>Item 2</Box>
<Box sx={{ order: 1 }}>Item 3</Box>
flex-grow
更多信息请参阅 MDN 上的 flex-grow。
项目 1
项目 2
项目 3
<Box sx={{ flexGrow: 1 }}>Item 1</Box>
<Box>Item 2</Box>
<Box>Item 3</Box>
flex-shrink
更多信息请参阅 MDN 上的 flex-shrink。
项目 1
项目 2
项目 3
<Box sx={{ width: '100%' }}>Item 1</Box>
<Box sx={{ flexShrink: 1 }}>Item 2</Box>
<Box sx={{ flexShrink: 0 }}>Item 3</Box>
align-self
更多信息请参阅 MDN 上的 align-self。
项目 1
项目 2
项目 3
<Box>Item 1</Box>
<Box sx={{ alignSelf: 'flex-end' }}>Item 2</Box>
<Box>Item 3</Box>
API
import { flexbox } from '@mui/system';
| 导入名称 | Prop | CSS 属性 | 主题键 |
|---|---|---|---|
flexDirection |
flexDirection |
flex-direction |
无 |
flexWrap |
flexWrap |
flex-wrap |
无 |
justifyContent |
justifyContent |
justify-content |
无 |
alignItems |
alignItems |
align-items |
无 |
alignContent |
alignContent |
align-content |
无 |
order |
order |
order |
无 |
flex |
flex |
flex |
无 |
flexGrow |
flexGrow |
flex-grow |
无 |
flexShrink |
flexShrink |
flex-shrink |
无 |
alignSelf |
alignSelf |
align-self |
无 |