Flexbox - Display Flex do CSS em 3 passos

O que é?

Flexbox é uma ferramenta do CSS3 que serve para dispor os elementos dentro de um determinado container em linhas ou colunas.

É bastante flexível e permite que você arranje os elementos horizontal ou verticalmente, com ou sem espaços entre eles, de tamanhos iguais ou diferentes. Dá para criar grades, carróseis, cards e mais uma infinidade de coisas.

Passo 1 - O Flex Container

Primeiramente, você precisa especificar o container. Um container é simplesmente alguma div, section, article, aside, ou um outro elemento de caixa que deve conter todos os elementos que você pretende dispor/posicionar em linhas ou colunas.

Assim que você atribuir a propriedade de CSS display: flex ao container, ele passará a ser o que chamamos de flex container e todos seus filhos diretos, por sua vez, serão os flex-itens.

Nota: Clique nas abas HTML ou CSS do painel abaixo para ver o respectivo código.

See the Pen PoqKxPd by Agilso Oliveira (@agilso) on CodePen.

A div.my-flex-container é o flex container ao passo que todo div.my-flex-item é um flex-item.

Note que a única propriedade relacionada ao flebox que usamos foi o display: flex no container. Essa única linha fez com que seus filhos ficassem posicionados lado a lado, ao invés de um embaixo do outro como seriam normalmente no fluxo do documento.

Outra coisa a se reparar é que, por padrão, os flex-itens ocupam somente o espaço que precisam, ao invés de tomar todo o espaço do container.

Para fazer que os flex-itens tomem todo o espaço disponível do container, vamos adicionar a propriedade flex: 1 a eles.

See the Pen CSS Flex - P1.1 by Agilso Oliveira (@agilso) on CodePen.

Logo falaremos mais sobre o flex: 1 e as outras propriedades disponíveis para customizar os flex itens.

Outra coisa se reparar é que, se inserirmos outras tags div.my-flex-item, seus tamanhos serão ajustados para caber dentro do container.

See the Pen CSS Flex - P1.2 by Agilso Oliveira (@agilso) on CodePen.

Repare que com isso, já sabemos como fazer uma grade (grid) para nossa página. ;)

Passo 2 - Configurando o container

Há algumas opções interessantes que podemos colocar no container para modificar a disposição dos flex-itens.

Flex Direction

A propriedade flex-direction, como o nome sugere, vai definir o eixo do container e a direção dos flex-itens. Há 4 possíveis valores, veja a tabela abaixo.

Por exemplo, se aplicarmos flex-direction: column-reverse no nosso container, o resultado fica assim:

Fique a vontade para testar os outros valores e ver o que acontece.

Flex-wrap

A propriedade flex-wrap diz respeito a como os flex-itens vão se comportar caso não caibam dentro de uma única linha (ou coluna) do container.

Flex Flow

A propriedade flex-flow é somente syntax sugar para as propriedades flex-wrap e flex-direction, permitindo uni-las numa única linha.

.my-flex-container {
  flex-flow: row wrap-reverse;

  # flex-flow: valor-flex-direction valor-flex-wrap;
}

Align-content

A propriedade align-content estabelece como os flex-itens ficarão alinhados segundo o eixo do container. O eixo do container é simplesmente a direção escolhida. Em outras palavras,

Align-items

A propriedade align-items define como os flex-itens serão postos segundo o eixo contrário ao do container. Eixo contrário?

O eixo contrário é o eixo perpendicular a direção escolhida para o container. Em outras palavras, dependendo de qual for o flow-direction do container, o align-items alinha os items verticalmente ou horizontalmente.

É a mesma coisa que o align-content, mas para o eixo contrário.

Justify Content

Passo 3 - Configurando os flex itens

Já posso usar em produção?

Sim. Flexbox é um feature que já pode ser usado em produção. Estima-se que mais de 95% dos usuários da internet já possuem browsers compatíveis com essa funcionalidade (segundo o caniuse.com/flexbox).

Outra indicação é que vários frameworks de CSS, como o Bulma , Milligram e outros, adotaram o flexbox em suas grades.