#Propriedades do container
| Propriedade | Valores | Descrição | |
|---|---|---|---|
display | flexinline-flex | Habilitar container flex | |
flex-direction | rowrow-reversecolumncolumn-reverse | Definir direção do eixo principal | |
flex-wrap | nowrapwrapwrap-reverse | Definir comportamento de quebra | |
flex-flow | row nowrapcolumn wrap... | Atalho para direction + wrap | |
justify-content | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly | Alinhamento do eixo principal | |
align-items | flex-startflex-endcenterstretchbaseline | Alinhamento do eixo transversal | |
align-content | flex-startflex-endcenterstretchspace-betweenspace-around | Alinhamento de múltiplas linhas no eixo transversal | |
gap | 10px1rem10px 20px | Espaço entre itens |
#Propriedades do item
| Propriedade | Valores | Descrição | |
|---|---|---|---|
order | 01-1... | Ordem do item | |
flex-grow | 012... | Taxa de crescimento | |
flex-shrink | 01... | Taxa de encolhimento | |
flex-basis | auto0100px50% | Tamanho inicial | |
flex | 10 1 auto1 1 0... | Atalho para grow shrink basis | |
align-self | autoflex-startflex-endcenterstretchbaseline | Alinhamento individual no eixo transversal |
#Padrões comuns
| Propriedade | Valores | Descrição | |
|---|---|---|---|
Alinhamento central | justify-content: centeralign-items: center | Centralização perfeita | |
Espaçamento entre extremos | justify-content: space-between | Primeiro e último nas extremidades | |
Distribuição uniforme | justify-content: space-evenly | Espaçamento igual em todo lugar | |
Layout vertical | flex-direction: column | Layout na direção vertical | |
Quebra automática | flex-wrap: wrap | Quebra automática quando transborda | |
Largura igual | flex: 1 | Itens de largura igual | |
Fixo + fluido | flex: 0 0 200pxflex: 1 | Barra lateral + layout principal |
#Valores abreviados do flex
| Propriedade | Valores | Descrição | |
|---|---|---|---|
flex: initial | = flex: 0 1 auto | Apenas encolher, manter base | |
flex: auto | = flex: 1 1 auto | Pode crescer e encolher | |
flex: none | = flex: 0 0 auto | Tamanho fixo, sem flex | |
flex: 1 | = flex: 1 1 0 | Distribuição igual |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.