Front End

Front End

Flexbox explicado em gifs

6 ago, 2018
Publicidade

Recentemente comecei a me aventurar em algumas novas tecnologias de front-end, e uma das mais legais que estudei foi o Flexbox. Para quem ainda não o conhece, essa especificação está há muito tempo nas redondezas, mas só nos últimos anos que começou a ter destaque por ganhar suporte dos navegadores.

De forma extremamente enxuta, o Flexbox é uma maneira mais inteligente de nos ajudar a montar nossos layouts de um jeito que sejam perfeitos em qualquer tipo de tela: seja em um desktop com uma resolução altíssima; ou um smartphone mais simples. O objetivo é tornar o desenvolvimento destas telas responsiva mais fácil para nós, profissionais, de TI.

Se você já pensou em Bootstrap, saiba que a última versão do framework mais famoso do mundo já está utilizando o Flexbox por debaixo dos panos nos seus componentes (para saber mais, veja este link). Para te ajudar a entender melhor como tudo isso funciona, farei a tradução e aprimoramento de um artigo muito bacana que eu vi no blog do FreeCodeCamp. O artigo em questão se chama “How Flexbox works — explained with big, colorful, animated gifs” e está disponível neste link.

Entrando no mundo do Flexbox

A tecnologia toda funciona em cima de algumas propriedades bem importantes. Veremos as quatro principais neste artigo.

Display: Flex

Se você acredita que precisará baixar alguma biblioteca ou coisa do tipo para começar a trabalhar com o Flexbox, saiba que você está muito enganado. Como citei anteriormente, essa tecnologia é uma especificação oficial do CSS, ou seja, o suporte vem diretamente dos navegadores (algo semelhante ao que acontece ao ECMAScript, por exemplo).

Para começar a usar o Flexbox, o processo é bem simples. Considere a seguinte página:

Aqui temos a estrutura básica de qualquer elemento Flexbox. O elemento que contém tudo o que queremos alinhar é chamado de container. Neste exemplo, o container possui quatro outros elementos filhos. Agora, basta adicionar a propriedade display:flex no container para ver a mágica acontecer.

Legal, né? Com isso temos o que é chamado de contexto flex para os elementos. Mas por que será que eles foram alinhados dessa maneira? É aí que entram outros dois conceitos fundamentais que veremos a seguir.

Flex Direction

Quando falamos de Flexbox, é importante termos consciência de que ele trabalha em cima de dois eixos: o eixo principal (chamado de main axis) e o eixo secundário (chamado de cross axis).

Tudo funciona de acordo com os eixos!

Por padrão, os itens são organizados ao longo do eixo principal, da esquerda para a direita. É por isso que os quadrados foram padronizados para uma linha horizontal quando aplicamos display: flex. Nós podemos mudar isso com a propriedade flex-direction. Por padrão, seu valor é row (linha), mas podemos alterar para column (coluna). Dessa maneira, voltamos ao comportamento anterior.

Além disso, podemos fazer mais algumas brincadeiras usando os valores row-reverse e column-reverse.

Justify Content

Agora que entendemos como funciona o sistema de eixos de base do Flexbox, podemos entender a propriedade justify-content. Em resumo, ela é a responsável por controlar como alinhar os itens no eixo principal. Podemos utilizar cinco valores:

  • Flex-start
  • Flex-end
  • Center
  • Space-between
  • Space-around

Veja como cada um deles atua:

Align Items

E assim como podemos controlar o alinhamento no eixo principal, também podemos fazer isso no eixo secundário! Para isso, utilizamos a propriedade align-items. Nesta propriedade conseguimos utilizar cinco valores diferentes:

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

Veja como cada um deles atua:

Desafio

Agora que sabemos como alinhar os elementos em ambos os eixos, fica o desafio: como podemos centralizar os elementos dentro do nosso container? A resposta é muito fácil, certo? Basta utilizarmos o valor center nas propriedades align-items e justify-content.

Agora pense no trabalho que você tinha pra fazer isso acontecer sem o Flexbox! Essa tecnologia é ou não é interessante?

Conclusão

Estes são somente alguns dos tópicos importantes sobre o funcionamento do Flexbox. Há muito mais propriedades que devem ser estudadas, mas todas elas se baseiam nos princípios que vimos aqui. Se você gostou do conteúdo, lhe convido a visitar o artigo original e alguns outros recursos que deixarei abaixo: