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`	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