CSS Flexbox: seu Guia Completo

O módulo Flexbox (ou Flexible Box), que é uma recomendação candidata do W3C desde outubro de 2017, veio para facilitar a vida na hora de organizar, alinhar e distribuir o espaço entre os itens de um container, mesmo quando o tamanho deles é incerto ou dinâmico (daí o nome "flexível").

A ideia por trás do layout flexível é permitir que o container modifique a largura, altura e ordem dos itens para otimizar o espaço disponível (principalmente para adaptar a qualquer tipo de dispositivo e tamanho de tela). Um container flexível pode expandir os itens para preencher o espaço livre ou encolhê-los para evitar que saiam do limite.

O mais legal é que o layout flexível não é amarrado a nenhuma direção, diferente dos layouts tradicionais (o block, que é vertical, e o inline, que é horizontal). Embora esses funcionem bem para páginas, eles não são tão "flexíveis" (esse trocadilho não poderia faltar!) para acomodar aplicações maiores ou mais complexas (especialmente quando falamos de mudanças de orientação, redimensionamento, estiramento, encolhimento etc.).

Importante: O layout flexível é mais adequado para componentes de aplicativos e layouts menores, enquanto o Grid é mais indicado para layouts em maior escala.

Como o flexbox é um módulo inteiro e não apenas uma propriedade, ele inclui um monte de coisas, como um conjunto completo de propriedades. Algumas dessas propriedades são para o container (o elemento pai, chamado de "flex-container"), enquanto outras são para os filhos (conhecidos como "flex-items").

Se o layout "tradicional" se baseia em direções de fluxo em bloco e inline, o layout flexível se baseia em "direções de fluxo flexíveis". A imagem abaixo mostra e explica a ideia central do layout flexível.

Os itens vão ser organizados seguindo ou o eixo principal (de main-start a main-end) ou o eixo cruzado (de cross-start a cross-end).

• Eixo principal – O eixo principal de um container flex é o eixo primário ao longo do qual os itens flexíveis são organizados. Lembre-se, não precisa ser necessariamente horizontal; depende da propriedade flex-direction.
• Main-start | Main-end – Os itens flexíveis são colocados dentro do container começando em main-start e indo até main-end.
• Tamanho principal – A largura ou altura de um item flex, o que estiver na dimensão principal, é o tamanho principal do item. A propriedade de tamanho principal de um item flex é ou width ou height, o que estiver na dimensão principal.
• Eixo cruzado – O eixo perpendicular ao eixo principal é chamado de eixo cruzado. Sua direção depende da direção do eixo principal.
• Cross-start | Cross-end – As linhas flex são preenchidas com itens e colocadas no container começando do lado de cross-start do container flex e indo em direção ao lado de cross-end.
• Tamanho cruzado – A largura ou altura de um item flex, o que estiver na dimensão cruzada, é o tamanho cruzado do item. A propriedade de tamanho cruzado é ou width ou height, o que estiver na dimensão cruzada.

Propriedades dos Elementos Pai (flex-containers)

.flex-container{
    display: flex;
    /* ou inline-flex */
}