O CSS Flexible Box Layout Model ou simplesmente Flexbox faz parte da especificação do CSS3 que promete organizar elementos na página previsivelmente quando o layout precisa ser visualizado em diversos tamanhos de tela e em diversos dispositivos.
O Flexbox nos ajuda a organizar esses elementos sem a ajuda do float e também nos ajudam a sanar problemas de Box Model que normalmente acontecem quando acrescentamos, padding, margin e border além da largura do elemento.
A ideia é simples: os filhos de um elemento com flexbox pode se posicionar em qualquer direção e pode ter dimensões flexíveis para se adaptar. Você pode posicionar os diversos elementos independente da sua posição na estrutura do HTML, o que é muito bom. Um dos problemas do float a sua dependência com os elementos na estrutura do HTML. Estes elementos precisam estar em uma ordem específica, se não o layout não dá certo. Com o Flexbox essa ordem não importa, isso quer dizer que você pode organizar a informação do seu HTML de beneficiando o SEO e Acessibilidade. O código da estruturação destes elementos fica mais simples e fácil de manter.
Atenção: O Flexbox ainda é uma especificação e ainda deve ser usada com prefixos como -webkit-, -moz-, -ms-, -o-.
Veja o exemplo completo no nosso GITHUB.
Elementos e Vocabulário
Você precisa entender que o Flexbox é uma nova maneira de posicionar elementos do seu layout e por isso precisamos de novos nomes para identificar os elementos da estrutura.
Flex container é o elemento que envolve sua estrutura. Você define que um elemento é um Flex Container com a propriedade display com os valores flex ou inline-flex.
Flex Item são os elementos filho do flex container.
Eixos ou Axes são as duas direções básicas que existem em um Flex Container: main axis, que seria o eixo horizontal ou o eixo principal e o cross axis que seria o eixo vertical.
Directions determina a origem e o término do fluxo dos ítens. Eles seguem o vetor estabelecido pelo modo traidicional de escrita: esquerda para direita, direita para esquerda etc.
A propriedade order determina o lugar que os elementos aparecerão.
A propriedade flex-flow determina a ordem do fluxo em que os elementos aparecerão.
Você pode definir se os elementos serão forçados a ficar em uma mesma linha ou se eles irão quebrar em várias linhas com a propriedade flex-wrap.
Definindo uma estrutura Flexbox
Para iniciarmos, segue o HTML básico abaixo:
Agora vamos para o CSS. Primeiro definimos para o div MAIN virar um Flex Container. Para isso definimos a propriedade display com os valores flex ou inline-flex. O valor FLEX faz o elemento ser um BLOCO, com o valor inline-flex, o elemento vira um inline-block com as propriedades de Flex Container.
Se fizermos isso automaticamente os divs dentro do nosso .main já ficarão um ao lado do outro.
Para você fazer com que os flex items (filhos do Flex Container) comecem a ter uma largura distribuída, basta definir para eles a propriedade flex, como abaixo:
Até agora está ficando assim:
A propriedade flex é um atalho para as propriedades flex-grow, flex-shrink e flex-basis. O flex-basis define a largura dos flex items. Deixemos eles quietinhos por enquanto.
Suponha agora que você queira modificar a ordem com que os elementos apareçam. Simples, use a propriedade order e modifique a ordem das colunas:
Nada de float para lá e float para cá. Só uma mudança de números e pronto. Simple like that.
Vamos pular para o .main novamente.
Flex-flow – definindo colunas ou linhas
Agora suponha que você queira linhas em vez de colunas. Tipo, você quer fazer uma versão para mobiles, em mobiles ter colunas é ruim, então você quer colocar uma coluna em cima da outra, coisa básica. Fazemos isso toda hora retirando os floats e as larguras das colunas. Aqui você define apenas a propriedade flex-flow com o valor column e pronto!
Os outros valores da propriedade flex-flow são row, row-reverse e column-reserve. O row-reverse e o column-reserve invertem a ordem dos elementos automaticamente sem a obrigação de modificar novamente a propriedade order definido em cada elemento. Coisa linda, fala aí.
Conclusão e referências
O Flexbox hoje roda em Chrome. Fiz testes no Safari 6 e não funcionou. No IE10 dizem que funciona com o -ms- aplicado. Acho que não ficaremos muito tempo sem utilizar essa recomendação. Ano que vem, talvez? 😉
Veja o exemplo completo no nosso GITHUB.
Será recomendado que o flexbox seja utilizado para layouts simples e organização de elementos internos. Para layouts mais complexos e maiores, a sugestão é que o método de Grid Layout seja utilizado. Temos um exemplo aqui de como funcionaria mais ou menos o Grid Layout – na verdade seria o Template Layout.
Isso é um grande avanço para a Arquitetura de Layouts. Não vamos mais depender da estrutura do HTML para fazermos nossos layouts. Fazer layouts responsivos ficará muito mais fácil e aplicações que precisam ter suas estruturas totalmente mudadas nos diversos dispositivos serão simples de manter. Reutilizaremos totalmente nosso HTML já programado e o CSS controlará de fato a camada visual das nossas aplicações e sites.