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' }}>…

flex-direction

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' }}>…
<Box sx={{ flexDirection: 'row' }}>…
<Box sx={{ 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

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: 'wrap' }}>…

justify-content

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: 'flex-end' }}>…
<Box sx={{ justifyContent: 'flex-start' }}>…
<Box sx={{ justifyContent: 'flex-end' }}>…
<Box sx={{ justifyContent: 'center' }}>…
<Box sx={{ justifyContent: 'flex-end' }}>…
<Box sx={{ justifyContent: 'center' }}>…

align-items

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: 'flex-start' }}>…
<Box sx={{ alignItems: 'flex-end' }}>…
<Box sx={{ alignItems: 'center' }}>…
<Box sx={{ alignItems: 'flex-end' }}>…
<Box sx={{ alignItems: 'flex-start' }}>…
<Box sx={{ alignItems: 'flex-end' }}>…
<Box sx={{ alignItems: 'center' }}>…

align-content

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' }}>…

子元素的属性

order

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

Item 1

Item 2

Item 3

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

flex-shrink

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

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