Flexbox

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

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

父元素的属性

display

<Box display="flex">…

flex-direction

<Box flexDirection="row">…
<Box flexDirection="row-reverse">…

flex-wrap

<Box flexWrap="nowrap">…
<Box flexWrap="wrap">…

justify-content

<Box justifyContent="flex-start">…
<Box justifyContent="flex-end">…
<Box justifyContent="center">…

align-items

<Box alignItems="flex-start">…
<Box alignItems="flex-end">…
<Box alignItems="center">…

align-content

<Box alignContent="flex-start">…
<Box alignContent="flex-end">…

子元素的属性

order

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

flex-grow

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

flex-shrink

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

align-self

<Box>Item 1</Box>
<Box alignSelf="flex-end">Item 2</Box>
<Box>Item 3</Box>

API

import { flexbox } from '@material-ui/system';