CSS3 Flexbox Posicionando elementos parte 1

CSS3 Flexbox Posicionando elementos parte 1

16/06/2018 2 Por Alisson Suassuna

Hoje vamos falar sobre CSS3 Flexbox Layout, módulo que foi implementado no CSS3 com intuito de fazer posicionamento de forma mais inteligente e fácil, lembrando que o CSS3 ainda está em desenvolvimento e não tem a intenção de ir para versões futuras, pois a estratégia dos mantenedores é criar módulos e adicioná-los nas especificações.

O que é FlexBox

Esssa imagem explica o funcionamento do flexbox

Essa imagem explica o funcionamento do flexbox

Essa imagem nos dá uma base para explicar o que é, e como funciona o Flexbox Layout, a linha na imagem com a cor marrom passa a ser um flex container quando marcamos um determinado elemento HTML com a propriedade display flex, esse container agrupa vários itens, onde são chamados de flex item. O FlexBox é unidimensional onde possui dois eixos, o principal main axis e o secundário cross axis, podemos configurar a forma que queremos trabalhar, com os eixos, colunas ou linhas, quando decidimos por exemplo; colunas o cross axis passa a ser a linha e vice-versa, temos também o main size que é o tamanho do eixo principal, cross size tamanho do eixo secundário, main start o (início) e o main end (fim), cross start e cross end fim desses respectivos eixos.

Vamos para os exemplos em código

Esse será nosso código base.


Com esse código nossa página no browser ficará assim.

Essa imagem representa o código escrito a cima nos browsers.

Para começarmos a trabalhar com Flexbox temos que dizer que a div será um flexbox, e para isso escrevemos a propriedade display: flex como foi mencionado na explicação acima, vamos escrever e ver qual o comportamento da nossa página.

resultado depois de escrever display: flex

resultado depois de escrever display: flex

Propriedade flex-direction

Podemos notar uma diferença no layout da página, os elementos se agruparam em forma de linhas, isso porque o main axis por padrão é o eixo da linha, para configurarmos o eixo temos a propriedade flex-direction com o atributo column


usando o flex-direction

usando o flex-direction



Podemos reverter a ordem das flex-itens com o atributo column-reverse


Mesma lógica para o atributo row-reverse


Cuidados

Vamos gerar um problema nesse layaout para que possamos ver como solucionar, digamos que queremos aplicar 50% no tamanho da nossa div pai, então escrevemos

Propriedade Flex-wrap

Podemos ver que a linha continua mesmo depois que saí do espaço do container, por padrão o Flexbox aplica um overflow e continua, mas não é esse o comportamento que queremos, para resolver esse problema, utilizamos a propriedade flex-wrap: wrap; aplicando essa propriedade ela irá quebrar a linha respeitando o tamanho do container.

Podemos também usar o reverse para reverter, o comportamento é o mesmo citado anteriormente, ele faz a reversão, ou seja, o elemento de cima vem para baixo e o de baixo vai para cima, faça o teste na sua casa.

Propriedade Flex-flow

Existe uma propriedade que faz uma junção dessas duas propriedades que é a flex-flow: row wrap; podemos configurar tudo com apenas uma linha de código.


E para a linha temos o flex-flow: row que vamos ter o mesmo comportamento só que para o eixo linha, faça o teste.

Propriedade justify-content

Esse conjunto de propriedades que vamos analisar trabalha com os main-start e o main-end, cross-start e cross-end.


Ele faz o alinhamento das flex-item ao início (lado esquerdo da tela).

A mesma coisa acontece quando aplicamos o justify-content: flex-end.

Irá alinhar os flex-items a partir do fim (lado direito da tela), podemos também centralizar os flex-items usando o justify-content: center.

justify-content: space-around quando aplicada essa propriedade, ela seleciona todo o espaço da flex-container e divide por igual para cada flex-item e coloca em volta do mesmo.

O justify-content: space-between faz o mesmo cálculo do espaço do space-around só que apenas para o espaço entre os flex-itens.


Alinhamento Cross Axis

Vamos aplicar um altura maior ao nosso flex-container para que possamos visualizar melhor a aplicabilidade das propriedades citadas nos exemplos.

Nossa página ficará da seguinte forma:

Propriedade align-items

Por padrão é aplicado a propriedade align-items: stretch.

o layaout não mudará em nada, pois esse é o padrão. Temos também o atributo baseline; esse irá modificar o layout, pois ele irá levar em consideração a linha dos flex-items  para alinhar.

Note que o flex-item 4 está um pouco mais alta pois ele é um pouco maior das demais e o baseline está alinhando de acordo com a linha do conteúdo.


A flex-start irá alinhar levando em consideração o cross axis e será aplicado em cima das flex-items.

Será alinhado iniciando pelo final da cross-axis.

Propriedade align-content

Essa propriedade irá servir quando tivermos mais de uma linha, então ela vai agrupar e aplicar em todas as linhas.

Caso queira jogar e aprender ao mesmo tempo veja o jogo Froggy

Obs: devido o conteúdo ser muito extenso decidi dividir em duas partes.

Veja também: Manipulando o DOM  entenda a diferença entre var e let