Introdução ao flexbox

Contêineres e Itens Flexbox #

Flexbox ou caixa flexível é um método de layout para organizar o conteúdo em uma página de maneira previsível. O Flexbox fornece uma melhoria em relação ao posicionamento do modelo de bloco tradicional usando floats ou até mesmo posicionamento de tabela para conteúdo na página.

Em sua essência, o Flexbox pode ser dividido em um elemento pai (contêiner flexível) e um elemento filho (item flexível).

Contêiner Flexível

Um contêiner flex pode ser criado definindo sua propriedade display como flex:

.container {
  display: flex;
}

Artigo flexível

Cada elemento filho de um contêiner flexível se torna um item flexível. Esses itens flexíveis podem então receber propriedades adicionais para modificar como estão posicionados na página.

.item {
  flex: 1;
}

Esta propriedade flex: 1 é uma abreviação de flex-grow: 1, permitindo que ela cresça em relação a seus irmãos dentro do contêiner.

Juntando isso, esta é a marcação HTML:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Introdução ao Flexbox #

O layout Flexbox (caixa flexível), introduzido no CSS3, fornece uma maneira mais eficiente de dispor, alinhar e distribuir espaço entre elementos filhos (flex items) dentro de um elemento container (flex container). Mais importante, mesmo quando seus tamanhos são desconhecidos ou dinâmicos e, portanto, o termo “flex” ou “flexível”.

Vamos começar com o básico e ver como um container pode ser inicializado como flex.

Considere a seguinte marcação:

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>

Um flexbox é inicializado simplesmente usando display: flex. Feito!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}

Agora que o contêiner flexível está pronto, vamos brincar com seus itens flexíveis, dando a eles uma largura de, digamos, 25% cada e centralizando horizontalmente os itens flexíveis dentro de seu contêiner pai.

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}

Por favor, note que eu propositadamente dei às 3 crianças uma largura de 25% cada para mostrar como é fácil mover as crianças dentro de um flexbox.

Agora, quando executarmos o código acima, devemos ver os 3 filhos dentro do contêiner horizontalmente um ao lado do outro. Isso ocorre porque, por padrão, um flexbox tem a propriedade flex-direction: row. Ou seja, por padrão, os itens flexíveis serão alinhados horizontalmente um ao lado do outro. Também deve haver uma lacuna à direita, pois a largura total das crianças não soma 100%.

Agora tente adicionar a propriedade justify-content: center ao flex-container.

.flex-container {
  ...
  justify-content: center;
}

O resultado seria as crianças sendo alinhadas horizontalmente ao centro. A mesma propriedade tem outros valores como flex-end(alinhar à direita), space-around(espaço igual ao redor dos itens), space-between(espaço igual entre os itens).

Importante: Outras propriedades de elemento de bloco como text-align: center etc. não têm efeito em um elemento flex.

Instalação ou configuração #

Flexbox é um módulo CSS3, padronizado pelo World Wide Web Consortium. É um modo de layout para organização de elementos de forma que os elementos se comportem de forma previsível quando o layout da página deve acomodar diferentes tamanhos de exibição.

Por fazer parte do CSS3, você não precisa instalar nada. Ele pode ser usado desde que o navegador o suporte, e a maioria dos navegadores modernos o faz. Para verificar se o seu navegador suporta ou não, aqui está o tabela de compatibilidade.

Para configurar e usar flexbox em seu CSS, basta adicionar display: flex a um seletor.