CSS Flexible Box Layout

No exemplo a seguir um contêiner foi definido como display: flex, o que significa que os três items filhos dele se tornaram flex. O valor de justify-content foi definido como space-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 de align-items ser stretch(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.

• flex
• flex-basis (en-US)
• flex-direction
• flex-flow
• flex-grow (en-US)
• flex-shrink (en-US)
• flex-wrap
• order (en-US)

A propriedade align-content, align-self, align-items e justify-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.

• justify-content (en-US)
• align-content
• align-items
• align-self
• place-content (en-US)
• place-items (en-US)
• row-gap (en-US)
• column-gap (en-US)
• gap

• Flexbox
• Flex Container (en-US)
• Flex Item (en-US)
• Main Axis (en-US)
• Cross Axis (en-US)
• Flex

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

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

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

Explicando as propriedades flex-grow, flex-shrink e flex-basis.

Dominando a embalagem de itens flex (en-US)

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

Padrão de projeto comuns que são casos de uso típicos do Flexbox.

Retrocompatibilidade do Flexbox (en-US)

Status do Flexbox nos browsers, problemas de interoperabilidade e suporte para browsers antigos e versões das especificações

Flexbugs

Uma lista curada pela comunidade de bugs do Flexbox nos navegadores e soluções alternativas