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(en-US) - 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(en-US)