跳转到内容

Flexbox

借助一整套的响应式 flex 的小方法,实现快速地管理布局,对齐,网格栏的大小,导航,组件等等。

如果你对 flexbox 不熟悉,我们建议你阅读 CSS-Tricks flexbox 手册。

父元素的属性

display

I'm a flexbox container!
<Box display="flex">

flex-direction

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<Box flexDirection="row"><Box flexDirection="row-reverse">

flex-wrap

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 flexWrap="nowrap"><Box flexWrap="wrap">

justify-content

Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
<Box justifyContent="flex-start"><Box justifyContent="flex-end"><Box justifyContent="center">

align-items

Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
<Box alignItems="flex-start"><Box alignItems="flex-end"><Box alignItems="center">

align-content

Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
<Box alignContent="flex-start"><Box alignContent="flex-end">

子元素的属性

order

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

flex-grow

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

flex-shrink

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

align-self

Item 1
Item 2
Item 3
<Box>Item 1</Box>
<Box 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