Conheça o Flexbox do CSS3 e suas funcionalidades

O CSS Flexible Box Layout Module Level 1, também conhecido como Flexbox, é uma recomendação de padrão em andamento no W3C – World Wide Web Consortium, a comunidade internacional que cuida dos processos de desenvolvimento de padrões abertos para a web.

Caso você tenha se perguntado alguma vez de onde vem a padronização para HTML, CSS, XML, DOM e cia., esta é a resposta sobre quem define o formato das ferramentas que você traz em seu arsenal de desenvolvedor/designer web.

A ideia principal por trás do Flexbox é fornecer um container com a habilidade de alterar a altura e a largura (e até mesmo a ordem) dos itens dentro dele, de maneira que ele preencha da melhor maneira possível o espaço disponível ou encolha para evitar sobreposição. Muitas vezes isso é necessário para poder se ajustar a diferentes dispositivos ou telas de diferentes tamanhos.

Devo me preocupar com a compatibilidade?

Apesar de ainda ser uma recomendação, o Flexbox já é amplamente suportado. Confira no Can I Use, um site que fornece tabelas de compatibilidade atualizadas para várias tecnologias front-end da web. Leve sempre em consideração a utilização de prefixos de fornecedor como -webkit e -moz quando estiver em dúvida; testar ainda é a melhor garantia.

Como todo bom web designer, você vai preparar sua folha de estilos com “fallbacks” ou media queries, para que a exibição da página continue elegante mesmo quando o browser do visitante não tiver suporte ao flexbox (ou se esse for incompleto).

A alternativa do design responsivo

E já que tocamos no assunto de media queries, que é um dos pilares do Design Responsivo para Web, vamos relembrar a principal razão de sua existência. O Design Responsivo para Web — vamos chamar de DRW daqui para frente — é um conjunto de conceitos que aplicamos em nossas produções web com a intenção de promover a melhor experiência possível aos visitantes, independente do dispositivo que estejam usando.

O DRW tem três pilares: grids fluídos, imagens flexíveis e media queries.

• As media queries permitem que você carregue folhas de estilos condicionalmente de acordo com o dispositivo usado para acessar o site. 
• O uso de imagens flexíveis se refere ao uso de técnicas que evitem a degradação da qualidade das imagens enquanto elas acompanham o redimensionamento e os ajustes do layout da sua página. 
• E finalmente, grids fluídos trata do conceito de dispor o seu conteúdo em grades e colunas. A propriedade grid do CSS geralmente é usada em layouts maiores, enquanto o Flexbox é melhor para componentes de uma aplicação ou um pequeno layout. Independente da sua escolha, é importante conhecer o que o Flexbox tem a oferecer, na busca de projetos que sejam impressionantes em várias telas diferentes.

Elementos básicos do Flexbox

Antes de colocar a mão na massa, vamos dar nome aos bois. Conheça um pouco do vocabulário do Flexbox:

Container flex

É o elemento pai que vai conter os itens flex. Você pode definir um container flex definindo o valor da propriedade ‘display‘ como ‘flex‘ ou ‘inline–flex‘.

Item flex

Cada filho de um container flex se torna um item flex. Se um texto for incluído diretamente no container ele será encapsulado em um item flex anônimo.

Eixos

• O layout de todas as caixas flex segue dois eixos. Os itens flex seguirão ao longo do eixo horizontal (main axis). O eixo vertical (cross axis) é perpendicular ao eixo horizontal.
• A propriedade ‘flex-direction’ estabelece o eixo horizontal (main axis).
• A propriedade ‘justify-content’ define como os itens flex serão dispostos no eixo horizontal da linha onde estiverem.
• A propriedade ‘align-items’ define qual será a maneira padrão de disposição dos itens flex ao longo do eixo vertical na linha atual.
• A propriedade ‘align-self’ define individualmente como cada um dos itens flex vai se alinhar em relação ao eixo vertical, podendo sobrepor o que foi definido por padrão em ‘align-items’.

Direções

• Os lados início/fim (main start/main end) marcam o começo e o fim do fluxo de itens flex. O início vertical e o fim vertical (cross start/cross end) marcam o topo e a base. Eles seguem o eixo horizontal (main axis) e o eixo vertical (cross axis) do container flex seguindo o vetor estabelecido pelo ‘writing-mode’ (left-to-right, right-to-left, etc.).
• A propriedade ‘order’ atribui elementos a grupos ordenados e determina qual elemento aparece primeiro.
• A propriedade ‘flex-flow’ afeta simultaneamente as propriedades ‘flex-direction’ e ‘flex-wrap’ na distribuição dos itens flex.

Linhas

• Itens flex podem ser distribuídos tanto numa única linha quanto em várias, de acordo com a propriedade ‘flex-wrap’, que controla a direção do eixo vertical e a direção em que novas linhas são empilhadas.

Dimensões

• Os equivalentes de ‘height’ e ‘width’ nos itens flex são tamanho (main size) e tamanho vertical (cross size), seguindo respectivamente os eixos horizontal (main axis) e vertical (cross axis) do container flex.
• As propriedades ‘min-height’ e ‘min-width’ têm um novo valor, ‘auto’, que estabelece o tamanho mínimo de um item flex.
• A propriedade ‘flex’ agrupa as propriedades ‘flex-basis’, ‘flex-grow’, e ‘flex-shrink’ para estabelecer a flexibilidade do item flex.

E então, pronto para usar o Flexbox? Ainda tem dúvidas? Deixe um comentário e participe da conversa!