Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
CSS Flexible Box Layout
CSS Flexible Box Layout é um módulo doCSS que define um layout multicoluna otimizado para o design de interfaces de usuário, para isso busca lidar com o layout dos itens de maneira unidimensional. No modelo de layout do Flexbox, os filhos de um contêiner flex podem ser dispostos em qualquer direção, e podem "flexibilizar" seus tamanhos, crescendo para preencher o espaço vazio ou diminuindo para evitar o transbordamento do elemento pai. O alinhamento horizontal e vertical dos filhos podem ser facilmente manipulados.
Exemplo Básico
No exemplo a seguir um contêiner foi definido comodisplay: flex, o que significa que os três items filhos dele se tornaram flex. O valor dejustify-content foi definido comospace-between para espaçar os itens uniformemente no eixo principal. Uma quantidade igual de espaço é colocada entre cada item com a esquerda e direita dos itens sendo niveladas com as bordas do contêiner flex. Você também pode perceber que os items estão alongados no eixo transversal, isso acontece por causa do valor padrão dealign-items serstretch(esticar). Os itens se estendem até a altura do contêiner flex, fazendo com que eles sejam tão altos quanto o item mais alto.
Referência
Propriedades CSS
Propriedades de Alinhamento
A propriedadealign-content,align-self,align-items ejustify-content apareceram inicialmente na especificação do Flexbox, mas agora estão definidas em Box Alignment. As especificações do Flexbox agora referência a especificação do Box Alignment para definições atualizadas. Propriedades de alinhamento adicional agora também são definidas em Box Alignment.
Entradas do glossário
Guia
- Conceitos básicos de flexbox
Uma visão geral sobre as funcionalidades do Flexbox
- Relação entre o Flexbox e os outros métodos de layout
Como o Flexbox está relacionado aos outros métodos de layout, e outras especificações CSS
- Alinhando itens em um contêiner flex
Como as propriedades Box Alignment trabalham com Flexbox.
- Ordenando itens flex
Explicando as diferentes formas de mudar a order e direção dos itens, e cobrindo os possíveis problemas em fazer isso.
- Proporções de Controle de itens flex ao longo do eixo principal
Explicando as propriedades flex-grow, flex-shrink e flex-basis.
- Dominando a embalagem de itens flex
Como criar contêiners flex com múltiplas linhas e controlar a exibição dos itens nessas linhas.
- Casos típicos de uso do Flexbox
Padrão de projeto comuns que são casos de uso típicos do Flexbox.
- Retrocompatibilidade do Flexbox
Status do Flexbox nos browsers, problemas de interoperabilidade e suporte para browsers antigos e versões das especificações
Especificações
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 |
Veja também
- Flexbugs
Uma lista curada pela comunidade de bugs do Flexbox nos navegadores e soluções alternativas