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
I'm a flexbox container!
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<Box flexDirection="row">…
<Box flexDirection="row">…
<Box sx={{ flexDirection: 'row' }}>…
<Box flexDirection="row">…
<Box 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
<Box sx={{ flexWrap: 'nowrap' }}>…
<Box flexWrap="nowrap">…
<Box flexWrap="nowrap">…
<Box sx={{ flexWrap: 'wrap' }}>…justify-content
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
Item 1
<Box sx={{ justifyContent: 'flex-start' }}>…
<Box justifyContent="flex-end">…
<Box justifyContent="center">…
<Box justifyContent="flex-end">…
<Box justifyContent="center">…
<Box sx={{ justifyContent: 'flex-end' }}>…
<Box sx={{ justifyContent: 'center' }}>…
<Box justifyContent="flex-end">…
<Box justifyContent="center">…
<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 sx={{ alignItems: 'flex-start' }}>…
<Box alignItems="flex-end">…
<Box alignItems="flex-start">…
<Box alignItems="flex-end">…
<Box alignItems="center">…
<Box sx={{ alignItems: 'flex-end' }}>…
<Box alignItems="flex-start">…
<Box alignItems="flex-end">…
<Box sx={{ 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 sx={{ alignContent: 'flex-start' }}>…
<Box alignContent="flex-end">…
<Box alignContent="flex-end">…
<Box sx={{ alignContent: 'flex-end' }}>…Propriedades para os Filhos
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
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';| Nome da importação | Propriedade | Propriedade CSS | Chave do tema |
|---|---|---|---|
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 |