O drama do posicionamento de elementos na tela e o Flexbox

Parece simples, não? No entanto, como fazer os ícones das redes sociais ficarem à direita e centralizados verticalmente com o logotipo à esquerda? Algumas possibilidades são usar a propriedade position, a propriedade float ou a propriedade display mas, em todos os casos, teremos que usar algum número mágico. Considere que nosso HTML está como abaixo:

A div com a classe container ajuda a centralizar o conteúdo no interior do rodapé. Veja como poderíamos posicionar os ícones de rede social, da lista com a classe social, usando a propriedade position:

Repare que colocamos a declaração top: 11px para deixar os ícones centralizados verticalmente com o logotipo. Mas de onde vêm esses 11px? Podemos chegar nesse valor fazendo algumas contas, medindo a diferença de altura entre o logotipo na esquerda (54px) e os ícones (32px). Podemos, inclusive, deixar isso claro no código CSS, o que é considerado uma boa prática:

No entanto, esse número continua sendo meio mágico, não? E o que acontece se resolvermos trocar o logotipo ou os ícones por imagens de tamanhos diferentes? Teremos que mexer no CSS, não? Isso é sinal de que nosso layout não está muito flexível, aumentando o seu custo de manutenção.

É para resolver esses e outros casos que está surgindo um novo conjunto de regras para o CSS conhecido como módulo de regras de layout Flexbox. O principal objetivo dessa nova especificação é facilitar o controle de espaçamentos e tamanhos de elementos da página passando mais controle dos elementos filhos para o elemento pai. Assim, as declarações passam a valer independente de quantos e quais elementos filhos um determinado elemento container tem.

Vejamos um exemplo simples de como essa nova especificação pode nos ajudar. Considere o layout abaixo:

Para fazer as três caixas ficarem lado a lado dentro do container, podemos, simplificando um pouco, fazer

No entanto, a interação do width com as propriedades padding e border pode complicar nossas vidas na hora de fazer as três caixas sempre caberem na mesma linha da página. Além disso, o que acontece se decidirmos que teremos que colocar quatro caixas em vez de três apenas? Teremos que, novamente, mexer no CSS. Com a nova especificação flexbox fica muito mais simples! Basta indicar que o container é um container flex:

E, agora, indicar que as caixas dentro desse container devem ocupar igualmente o espaço (daí o valor 1 para todas elas):

E pronto! Veja que, em nenhum momento, precisamos fazer alguma conta ou nos preocuparmos com as dimensões de cada uma das caixas. O próprio navegador vai cuidar disso para nós!

Neste exemplo, tínhamos um número fixo de caixas: três. No entanto, nem sempre é assim. Em alguns cenários, podemos ter um número de caixas dentro de um container variável. Poderíamos ter cinco, seis caixas. Neste caso, fica bem complicado fazer todas essas caixas permanecerem lado a lado dentro do container usando a propriedade width, não? Pois com flexbox não poderia ser mais simples:

Exatamente o mesmo CSS de antes! Repare que a declaração flex: 1 faz com que o navegador distribua o espaço do container entre as caixas independente do número de caixas!

Agora, e se quisermos que a distribuição de espaço não seja exatamente igual entre as caixas? Poderíamos querer que a primeira caixa fosse maior que as outras, por exemplo. Sem problemas!

Desta forma, dizemos ao navegador que a primeira caixa deve receber duas vezes mais espaço que as outras, novamente sem importar quantas sejam as outras.

Voltando ao nosso problema original: queríamos deixar os ícones das redes sociais à direita e centralizados verticalmente com o logotipo no nosso rodapé. Num container flex, além de poder controlar o tamanho dos filhos de um container, podemos controlar a distribuição de espaço entre eles e o alinhamento deles com relação ao container.

Neste caso do rodapé, queremos que os elementos fiquem centralizados verticalmente no rodapé. Então basta declararmos

Com isso já chegamos no seguinte resultado:

Agora, para fazer os ícones das redes sociais ficarem à direita, podemos mudar a forma como o container flex distribui o espaço que sobra entre seus filhos. Como não declaramos a propriedade flex nem no logotipo nem nos ícones, eles permanecem com o tamanho original. Assim, sobra bastante espaço livre no rodapé. Esse espaço sobrando, por padrão, fica após os elementos, mas podemos mudar essa distribuição com a propriedade justify-content de um container flex. No nosso caso, queremos que o espaço fique todo entre os dois elementos, então basta declararmos isso

E pronto! Com apenas três declarações, chegamos ao resultado desejado sem usar números mágicos no CSS.

Os dois exemplos dados lidam com dimensões e espaços no eixo horizontal da página, mas também é possível usar um container flex para controlar os espaços e tamanhos no eixo vertical da página. Considere o seguinte layout, bastante usado por diversos sites:

O código HTML dessa página seria algo como

Neste layout, o rodapé deve sempre aparecer no final da tela, independente do tamanho do texto. Uma forma de fazer isso é transformar nossa página inteira num container flex:

Além disso, é necessário deixar nossa página ocupando sempre a tela toda:

Fazendo isso, já temos quase o que queremos. Falta apenas dizer para o body que os filhos dele devem ser dispostos um em cima do outro, e não um ao lado do outro, como é o padrão com um container flex:

Com essas declarações, voltamos praticamente ao ponto inicial:

No entanto, agora basta declararmos que o corpo do site deve ocupar todo o espaço sobrando no container flex:

E pronto! Como não declaramos a propriedade flex nem para o cabeçalho nem para o rodapé, eles permanecem com o tamanho original. Resta então ao corpo da página crescer para ocupar o espaço completo da página.

Um outro problema que a especificação Flexbox ataca é a ordem dos elementos em uma página. Antes dela, a ordem em que os elementos aparecem numa página HTML é basicamente determinada pela ordem em que eles aparecem no código fonte da página. Isso pode ser um fator limitante, principalmente considerando layouts responsivos em que, muitas vezes, queremos mostrar elementos da página em ordens diferentes no desktop e nos dispositivos móveis. Considere o exemplo abaixo:

No desktop, é interessante mostrar o pacote mais relevante no meio da tela. Entretanto, nos tablets e celulares, os três pacotes lado a lado não caberiam muito bem. Uma alternativa, então, é deixar o pacote mais interessante acima dos outros, como nas figuras abaixo.

O código HTML para essa parte da página, simplificado, poderia ser algo como

Deixamos o pacote mais relevante em primeiro no HTML. Dessa forma, para os layouts mobile e tablet, não há muito segredo. Mas e o desktop?

Transformando a lista de pacotes num container flex, podemos usar a propriedade order nos elementos filhos para reordená-los como quisermos dentro do container:

Essa mesma técnica também pode ser bastante interessante para tornar nosso site mais acessível para leitores de tela. Podemos, por exemplo, colocar um menu de navegação no início do HTML para os leitores de tela, mesmo se ele aparecer depois no layout!

Por esses exemplos, é possível notar que a especificação Flexbox é bastante poderosa. No entanto, é importante ressaltar que ela não é feita para resolver todos os problemas de layout. Em muitos casos, usar as propriedades mais antigas position e float já basta e resulta num layout que funciona em mais navegadores.

Vale notar que a especificação Flexbox já é recomendação candidata pela W3C, ou seja, os navegadores já devem começar a implementá-la. O suporte dos navegadores já é razoável: tirando o Internet Explorer, que passou a suportar a especificação apenas na versão 10, e o Opera, que passou a suportá-la apenas na versão 12.1, todos os outros já a suportam há bastante tempo. Alguns ainda implementam uma sintaxe antiga da especificação, em que se usava display: box em vez de display: flex.

Os exemplos usados neste post estão online. Veja o código fonte no Github e teste no seu navegador! Conheça mais nos nossos cursos de front-end.