Artigo original “A Visual Guide to CSS3 Flexbox Properties” escrito por Dimitar Stojanov, que gentilmente me permitiu traduzi-lo para o nosso idioma.

A propriedade CSS3 Flexbox, oficialmente chamada de CSS Flexible Box Layout Module é um “novo” modelo de layout em CSS3 feito para melhorar o alinhamento, direção e ordenação de itens em um container, mesmo quando estes possuem dimensões diferentes ou desconhecidas.

A principal característica de um container tipo flex é a capacidade de alterar a largura ou altura de seus elementos filhos para preencher o espaço disponível da melhor maneira possível em qualquer resolução de tela.

Flexbox é fácil de implementar. Designers e desenvolvedores não têm maiores dificuldades em criar um layout com Flexbox (exceto pelo suporte de alguns navegadores).
Como o posicionamento dos itens é quase que automático, layouts mais complexos podem ser criados com menos código, tornando o processo de desenvolvimento mais simples.
O algoritmo do Flexbox é baseado nos eixos horizontal (main axis) e vertical (cross axis), ao contrário de layouts em bloco e em linha.
Flexbox deve ser usado em pequenos componentes do projeto enquanto um modelo de grid CSS está surgindo para lidar com layouts maiores.

Melhor que explicar como as propriedades flex funcionam, este guia irá se concentrar em como elas afetam o layout de uma maneira visual.

Continue reading