Flexbox
Flexbox é o nome normalmente usado para o Módulo CSS Flexible Box Layout, um modelo de layout para mostrar itens numa única dimensão — como linha ou como coluna. Inserir uma caixa dentro da outra (p. ex. linha numa coluna, ou coluna numa linha) permite a criação de layouts em duas dimensões.
Na especificação, Flexbox é descrito como um modelo de layout usado na criação de interfaces. A principal característica do Flexbox é o fato que itens em um layout podem crescer ou encolher. Espaços podem ser atribuídos aos próprios itens, distribuídos entre eles, ou posicionados ao redor dos mesmos.
Flexbox também permite o alinhamento de itens tanto no Eixo Principal (en-US) quanto no Eixo Transversal (en-US), provendo um alto nível de controle sobre o tamanho e alinhamento de grupos de itens.
Ver também
Referência de propriedades
Leitura adicional
- CSS Flexible Box Layout Module Level 1 Specification
- Guia CSS Flexbox:
conceitos básicos de flexbox - Guia CSS Flexbox:
relação entre flexbox e outros métodos de layout(en-US) - Guia CSS Flexbox:
alinhando itens em um container flex - Guia CSS Flexbox:
ordenando itens flex - Guia CSS Flexbox:
controlando proporções de itens flex ao longo do eixo principal(en-US) - Guia CSS Flexbox:
dominando o uso da propriedade wrap(en-US) - Guia CSS Flexbox:
casos típicos de uso do flexbox