Aprenda Flexbox de uma maneira divertida

A criação de um layout exige a aplicação de uma linguagem de estilo para que os elementos fiquem dispostos de maneira harmônica nas páginas. O Cascading Style Sheets, CSS, é o principal mecanismo de aplicação de estilos em projetos criados em HTML ou XML. Existe uma infinidade de recursos que podem ser utilizados e, hoje, detalharemos um dos mais importantes para a organização dos elementos na tela: o Flexible Box Module, famoso Flexbox.

Para tornar o processo de aprendizagem mais divertido e contribuir para a memorização das regras, criamos um tutorial bem diferente sobre as aplicações: vamos falar de Flexbox com gatinhos!

Um breve resumo sobre layouts

O modelo Flexbox foi criado a partir da versão 3 do CSS. Antes desta atualização, os modelos geralmente aplicados eram o normal flow, grids, floats, positioning e multiple column.

Normal flow → refere-se aos elementos block, com os elementos dispostos um após o outro, e inline, com os elementos dispostos um ao lado do outro.

Grid → como o nome diz, é um formato de grade. Há linhas verticais e horizontais que preenchem o documento e os elementos podem ser inseridos em dentro delas.

Floats → permite a inserção de imagem dentro de uma coluna de texto, que é deslocado para lateral.

Positioning → define a posição de um elemento dentro da página. Por padrão, o valor é static, que acompanha o fluxo normal da página.

Multiple-column → dispõe o layout em diversas colunas.

Com a chegada do Flexbox, foi possível reconfigurar a forma de dispor os elementos com regras mais específicas e flexíveis. As propriedades flex-direction, flex-wrap, flex-flow, justify-content, align-items e align-content devem ser declaradas no container, o elemento pai, e as tags order, flex-grow, flex-shrink e align-self.

Como funciona o Flexbox?

O Flexbox é um formato unidimensional que permite dispor os elementos dentro da página de maneira organizada e com recursos mais simples do que os demais layouts. Ele permite maior flexibilidade no posicionamento dos elementos na tela, proporcionando mais assertividade e agilidade na construção das páginas.

Para adicionar o Flexbox no seu projeto, é necessário definir a propriedade display: flex dentro de um seletor, que pode ser chamado de container. Este será o elemento pai e todos os seus elementos filhos serão itens flexíveis.

Basicamente, o código ficaria desta forma:

.container{

display: flex;

}

Flex-direction

A organização dos elementos é baseada em eixos, sendo o eixo principal e o eixo transversal, que é perpendicular ao eixo principal. As propriedades que podem ser aplicadas no eixo principal são: row, row-reverse, column e column-reverse. Os valores devem ser declarados dentro de uma propriedade chamada flex-direction.

O eixo principal define a direção dos itens flexíveis, que pode ser em linha, utilizando a propriedade row ou em coluna com a propriedade column. O complemento reverse apenas significa que os elementos ficarão dispostos ao contrário, mas seguindo o mesmo padrão.

Entenda um pouco melhor essa organização na ilustração abaixo:

Vamos compreendê-las separadamente:

• flex-direction: row

Com este valor, o eixo principal dos itens flexíveis será movido inline, ou seja, na direção da linha. A adição do elemento reverse apenas altera a ordem dessa direção.

• flex-direction: column

Neste valor, o eixo principal se moverá por toda a página, do topo ao rodapé, na direção block. O reverse segue o mesmo sentido do conceito anterior.

Detalhe importante: por padrão, ao inserir a tag display: flex, a direção setada é row.

• flex-wrap

Com esta propriedade, podemos definir se o texto criado terá ou não quebra de linha e como ela se comportará. O flex-wrap pode receber três valores, sendo eles: wrap, wrap-reverse e nowrap.

• flex-wrap: wrap

Gera a quebra automática das linhas quando esta alcança o limite de determinada largura do container.

• flex-wrap: wrap-reverse

Também gera a quebra automática de linhas, entretanto, no sentido contrário.

• flex-wrap: no-wrap

Não gera quebra de linha, os elementos “encolhem” para se encaixar nos limites definidos no container.

Justify-content

O justify-content é uma propriedade que alinha os itens de um container com base no eixo principal. São possíveis posições: flex-start, flex-end, center, space-between, space-around e space-evenly.

• justify-content: flex-start

Os itens flexíveis são alinhados no início do eixo principal.

• justify-content: flex-end

Os itens flexíveis são alinhados no fim do eixo principal.

• justify-content: center

Os itens flexíveis são alinhados ao centro do eixo principal.

• justify-content: space-between

Há um espaço de igual tamanho entre os itens flexíveis, sendo que o primeiro item fica no início do eixo principal e o último item no final.

• justify-content: space-around

Os itens flexíveis são distribuídos com espaçamento de mesmo tamanho na linha, porém o espaço antes do primeiro item e depois do último é a metade do espaço dos itens adjacentes.

• justify-content: space-evenly

Todos os espaços entre os itens são iguais, inclusive os espaços antes do primeiro item e após o último item.

align-content

A propriedade align-content dispõe as linhas ao longo do eixo transversal do container e só terá efeito se o elemento tiver mais de uma linha e a tag flex-wrap: wrap tiver ativada. Os valores possíveis são: flex-start, flex-end, stretch, space-between e space around.

• align-content: flex-start

As linhas são dispostas a partir do início do eixo transversal.

• align-content: flex-end

As linhas são dispostas a partir do fim do eixo transversal.

• align-content: center

As linhas são dispostas no centro do eixo transversal.

• align-content: stretch

As linhas ocupam todo o espaço disponível ao longo de todo o eixo transversal.

• align-content: space-between

As linhas são dispostas de maneira uniforme, mas a primeira linha fica no início do eixo transversal e a última no fim.

• align-content: space-around

As linhas também são dispostas de forma uniforme, entretanto há espaços também antes da primeira linha e após a última linha.

Align-items

O align-items funciona semelhante ao justify-content, porém define a disposição dos itens flexíveis ao longo do eixo transversal, em vez do eixo principal, como o justify content. Os valores possíveis são: stretch, flex-end, flex-start, center e baseline.

• align-items: stretch

A propriedade define o posicionamento do item dentro do bloco no qual está inserido, controlando o alinhamento no eixo transversal.

• align-items: center

Os itens flexíveis são centralizados no eixo transversal.

• align-items: baseline

Os itens são alinhados conforme suas linhas de base.

• align-items: flex-end

Os elementos são posicionados no início do eixo transversal.

• align-items: flex-start

Os elementos são posicionados no fim do eixo transversal.

Order

Define a ordem do posicionamento dos elementos dentro do container.

Flex-shrink

Define a proporção que se deseja diminuir o tamanho do item flexível e possui valor padrão 0 (o item não deve diminuir), aceitando apenas valores positivos.

Flex-grow

Define a proporção que os elementos irão crescer. O valor padrão é 0 (o item não deve crescer) e também aceita apenas valores positivos.

Flex-basis

A propriedade flex-basis define a largura ou altura inicial do item flexível. O campo aceita valores em percentual, em pixels e o padrão definido é auto.

Align-self

A propriedade define o posicionamento do item flexível no elemento pai, sobrescrevendo o valor definido na propriedade align-items individualmente. Os valores que podem ser definidos nesta tag são: auto, flex-start, flex-end, stretch, center e baseline.

• align-self: auto

É o valor definido por padrão inicialmente, que herda as configurações do align-items aplicado no elemento pai.

• align-self: baseline

O item é alinhado de acordo com a linha de base do seu texto.

• align-self: center

Centraliza o item flexível dentro do container.

• align-self: flex-start

Também pode ser definido como self-start e posiciona o elemento no início do eixo transversal.

• align-self: flex-end

Pode ser declarada também como self-end e posiciona o elemento no fim do eixo transversal.

• align-self: stretch

Permite esticar o elemento para preencher a área do container.

Como aprender e aplicar o Flexbox jogando?

Já que estamos abordando o conteúdo de forma divertida, precisamos falar sobre como você pode praticar muito com os games. Existem alguns jogos online que auxiliam no aprendizado e fixação do conteúdo sobre Flexbox. Confira alguns deles:

Flexbox Froggy

Neste jogo, você utilizará seus conhecimentos para posicionar o sapo nos locais corretos conforme as orientações que aparecem na tela. Você pode conferir mais detalhes e também iniciar uma partida aqui.

Flexbox Zombies

Já pensou atingir zumbis controlando suas armas com Flexbox? Parece impossível, né! Mas, o game Flexbox Zombies desenvolveu essa maneira divertida e diferenciada de aprender sobre o modelo. Acesse aqui.

Flexbox Defense

Você já deve conhecer aqueles games nos quais você precisa defender o seu reino posicionando armas, guardas e barricadas. Neste game, você irá alinhar os canhões utilizando Flexbox para proteger seu território das ameaças inimigas! Acesse aqui.

Faça download do arquivo completo para consultar quando quiser!

Neste artigo, pensamos em uma maneira bem diferente de explicar o Flexbox, ferramenta tão importante no desenvolvimento de layouts atualmente. De forma divertida, compartilhei alguns dos conceitos aplicados em CSS e você pode baixar vários jogos que vão te ajudar a colocar em prática o que você aprendeu.

Sucesso!