CSS Flexbox: Como posicionar elementos na tela?

O meu primeiro artigo aqui no Pingback vai ser falando um pouco do tão temido Flexbox. 

É um dos meus conceitos favoritos de CSS e eu sei que no inicio ele pode parecer um pouco assustador, mas a ideia desse post é justamente explicar ele de forma simplificada, fazendo você gostar e usar tanto quanto eu!

Quando estamos aprendendo CSS uma das primeiras coisas que nos deixa desesperado é como posicionar elementos na tela, como deixar um elemento ao lado de outro sem quebrar tudo, ou como não utilizar valores altíssimos de margin e padding para separar eles? (por favor, não faça isso hahah). 

E é ai que surge o Flexbox, ele nos permite criar um layout eficiente, alinhar e distribuir elementos na tela, mesmo se o tamanho desses elementos for dinâmico. A ideia principal da propriedade flex é ser flexível, permitindo alterar propriedades como altura, largura e ordem afim de se adaptar da melhor forma possível no espaço disponível, podendo se expandir ou diminuir de acordo com a necessidade prevenindo que o layout quebre. Com o Flexbox também é possível definir a direção e o posicionamento dos elementos verticalmente e horizontalmente, o que não é possível com a propriedade block, por exemplo.

Conceitos básicos

O Flexbox é um modulo que possui várias propriedades, sendo que algumas delas são definidas no elemento "pai", enquanto outras são definidas no elemento "filho". A imagem abaixo ilustra um diagrama de como funciona o layout Flex.

• main axis (eixo principal) - é onde são inseridos os itens, o eixo principal pode ser tanto vertical quanto horizontal, dependendo da propriedade definida no flex-direction
• main-start | main-end (inicio | final) - os itens são dispostos no container a partir do inicio (main-start) em direção ao final (main-end)
  
• main size (tamanho principal) - a largura ou altura de um item dentro do container, sendo que a propriedade principal será definida pela direção vertical ou horizontal, podendo ser respectivamente a largura ou altura
• cross axis (eixo transversal) - é o eixo perpendicular ao eixo principal e sua direção depende da do eixo principal
  
• cross-start | cross-end (eixo inicial | eixo final) - flex lines que são preenchidas com itens e distribuídas iniciando pelo eixo inicial e indo em direção ao eixo final
  
• cross size (tamanho do eixo) - será a largura ou altura de um item dentro do container, dependendo de qual é sua direção
  

Propriedades do Flexbox

Depois de toda a teoria sobre Flexbox e seus conceitos básicos, chegamos as suas propriedades. Como já foi dito anteriormente algumas das propriedades serão definidas no elemento pai enquanto outras serão definidas no elemento filho. Mas o que é isso de pai e filho? 

O elemento pai é o container que vai englobar todos os itens e é nele que será definido o display: flex e também outras propriedades de posicionamento e alinhamento. E o elemento filho são justamente os itens dentro do container. Colocando de uma maneira visual, o código para essa estrutura seria mais ou menos assim:

Propriedades definidas no elemento pai

display

É a propriedade que define o container como flex e coloca todos os itens (elementos filhos) em um contexto flex, ou seja, respeitando essas propriedades.

flex-direction

Define o eixo principal, ou seja, qual será a direção dos itens dentro do container. Os valores possíveis são:

• row (default): da esquerda para direita
• row-reverse: da direita para esquerda
• column: de cima para baixo
• column-reverse: de baixo para cima

flex-wrap

Por padrão os itens que possuem display: flex irão se encolher para estarem sempre na mesma linha, mas é possível alterar esse comportamento com a propriedade flex-wrap, os valores são:

• nowrap (default): todos os itens ficarão na mesma linha
• wrap: os itens serão distribuídos em múltiplas linhas de cima para baixo
• wrap-reverse: os itens serão distribuídos em múltiplas linhas de baixo para cima

flex-flow

Essa propriedade junta o flex-direction e o flex-wrap, declarando os dois juntos. O valor padrão é: row nowrap.

justify-content

Define o alinhamento dos itens horizontalmente e distribui os espaços que sobram no container. Os valores possíveis dessa propriedade são:

• flex-start (default): itens são distribuídos no inicio de acordo com o flex-direction definido

• flex-end: itens são distribuídos no final de acordo com o flex-direction definido

• start: itens são distribuídos no inicio de acordo com o writing-mode

• end: itens são distribuídos no fim de acordo com o writing-mode

• left: itens são distribuídos no lado esquerdo do container, a não ser que isso não faça sentido com a propriedade flex-direction, nesse caso se comportando como o start

• right: itens são distribuídos no lado direito do container, a não ser que isso não faça sentido com a propriedade flex-direction, nesse caso se comportando como o end

• center: itens são centralizados

• space-between: itens são distribuídos igualmente, sendo que o primeiro fica junto a borda esquerda, e o último junto a borda direita

• space-around: itens são distribuídos com espaçamento igual entre eles

• space-evenly: itens são distribuídos de forma que os espaços entre dois itens sejam iguais (incluindo espaços nas bordas)

align-items

Define o alinhamento dos itens verticalmente, seguindo a mesma ideia do justify-content. Os valores são:

• stretch (default): estica os itens para preencher o container
• flex-start / start / self-start: itens são posicionados no topo
• flex-end / end / self-end: itens são posicionados na parte de baixo
• center: itens ficam centralizados no eixo vertical
• baseline: itens são alinhas de acordo com suas baselines

align-content

Organiza as linhas de itens dentro do container quando há espaço disponível, similar a funcionalidade do justify-content, mas é importante notar que essa propriedade não tem efeito caso exista apenas uma linha de itens. Os valores dessa propriedade são:

• normal (default): itens são distribuídos na sua posição default
• flex-start / start: itens são distribuídos no inicio do container
• flex-end / end: itens são distribuídos no final do container
• center: itens são centralizados no container
• space-between: itens são distribuídos igualmente, sendo que a primeira linha fica no topo e a última no fim do container
• space-around: itens são distribuídos com espaço dividido igualmente entre as linhas
• space-evenly: itens são distribuídos com espaço dividido igualmente entre eles
• stretch: itens de cada linha se esticam para ocupar todo o espaço restante

Propriedades definidas no elemento filho

order

Por padrão os elementos são distribuídos na ordem que são criados no HTML, porém essa propriedade permite alterar sua ordem.

É possível usar o código abaixo para alterar a ordem dos itens.

Tendo o resultado abaixo

flex-grow

Define a habilidade de um item "crescer" caso seja necessário. Aceita valores sem unidades de medidas (como pixel) e os usa como proporção, por exemplo, se todos os itens possuírem o valor flex-grow: 1, eles terão o mesmo tamanho, caso um dele possua o valor 2, ele terá o dobro do tamanho dos restantes.

flex-shrink

Define a habilidade de um item se encolher, caso necessário. Importante: números negativos não são aceitos.

flex-basis

Define o tamanho para um item antes que o espaço restante seja distribuído. Pode ser um valor numérico ou uma palavra chave, a palavra auto quer dizer que ele terá o tamanho de altura e largura definido nas suas propriedades, já a palavra content quer dizer que ele irá respeitar o tamanho do seu conteúdo.

flex

Essa propriedade junta o flex-grow, flex-shrink e flex-basis, declarando os três juntos. O segundo e o terceiro parâmetro são opcionais. O valor padrão é: 0 1 auto. É recomendado usar essa propriedade ao invés de cada uma individualmente.

align-self

Permite sobrescrever o alinhamento padrão (align-items) para posicionar um item individual. Os valores disponíveis são os mesmos do align-items.

Espero que tenham gostado e que esse post tenha ajudado a entender melhor como funciona o Flexbox! :)

Fontes:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://sharkcoder.com/layout/flexbox