Flexbox

Gerencie rapidamente o leiaute, o alinhamento e o dimensionamento de colunas de grade, navegação, componentes e muito mais com um conjunto completo de utilitários flexbox responsivos.

Se você é novo ou não está familiarizado com o flexbox, nós recomendamos você a ler este guia do Flexbox CSS-Tricks.

Propriedades para o pai

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">…

Propriedades para os Filhos

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';