CSS 3: Flex (Pai)#

Considere a imagem abaixo, que representa um elemento pai (em prateado) com três elementos filhos (em dourado).

flex1

Uma maneira de descrever essa imagem é em termos de position. Por exemplo, podemos dizer: "o filho A está a uma distância 0 da borda esquerda, o filho C está a uma distância 0 da borda direita e o filho B está a uma distância de 195px da borda esquerda".

Essa descrição não está errada, mas está muito rígida! Se aumentássemos a largura do elemento pai, por exemplo, teríamos que atualizar a posição de B.

Compare com a seguinte descrição: "os filhos estão distribuídos uniformemente em relação ao eixo horizontal". Essa descrição não apenas é mais sucinta que a anterior, como também é mais flexível: também vale para a imagem

flex2

a imagem

flex3

e a imagem

flex4

sem necessidade de reescrita.

Essa é exatamente a ideia do flexbox em CSS: em vez de posicionar cada elemento individualmente, vamos estabelecer regras que definem como um conjunto de elementos deve ser distribuído ao longo do espaço. Para isso, fazemos o pai desses elementos ter a propriedade especial

display: flex;

e usamos as propriedades desta página para configurar essas regras.

Algumas observações fundamentais#

As propriedades desta página controlam os tamanhos e posições apenas dos filhos de um elemento flex. O elemento em si se comporta como um block.
Se você quiser que o elemento em si se comporte como um inline, existe também display: inline-flex.
Um elemento flex tem um eixo principal e um eixo secundário. O eixo principal é uma referência básica para posicionamento dos filhos e o eixo secundário é uma referência para detalhes de posicionamento adicionais.
Portanto, o primeiro passo para usar um elemento flex é definir qual é o eixo principal e qual é o eixo secundário. Isso pode ser feito através da propriedade flex-direction, descrita na próxima seção.
Esta página descreve as propriedades que considera mais úteis, mas não todas. Para saber mais, recomendamos A Complete Guide to Flexbox.

A propriedade flex-direction#

A propriedade flex-direction define qual é o eixo principal e qual é o eixo secundário. Essa definição é poderosa! Se o eixo principal for horizontal, os filhos são posicionados horizontalmente mesmo se forem block. Se o eixo principal for vertical, os filhos são posicionados verticalmente mesmo se forem inline.

row: Eixo principal é horizontal, com início na esquerda e fim na direita. Eixo secundário é vertical.
row-reverse: Eixo principal é horizontal, com início na direita e fim na esquerda. Eixo secundário é vertical.
column: Eixo principal é vertical, com início em cima e fim embaixo. Eixo secundário é horizontal.
column-reverse: Eixo principal é vertical, com início embaixo e fim em cima. Eixo secundário é horizontal.

Exemplo:

Exercise 1

Modifique o flex-direction da classe pai para testar cada uma das 4 opções. Qual deve ser o valor de flex-direction para que os filhos estejam na horizontal, com o C à esquerda, o B no meio e o A à direita?

index.css
index.html
base.css

.pai {
  display: flex;
  /* Modifique a linha abaixo */
  flex-direction: row;
  background-color: silver;
}

.filho {
  background-color: gold;
}
<div class="pai">
  <div class="filho">A</div>
  <div class="filho">B</div>
  <div class="filho">C</div>
</div>
.pai {
  width: 100%;
  height: 100%;
}

.filho {
  margin: 0.5rem;
  padding: 0.5rem;
}

Preview

Resultado esperado

Answer

O valor row-reverse faz com que o eixo principal seja horizontal e a ordem dos filhos seja invertida.

.pai {
  display: flex;
  /* Modifique a linha abaixo */
  flex-direction: row-reverse;
  background-color: silver;
}

.filho {
  background-color: gold;
}

Exercise 2

Considere o HTML e CSS a seguir:

index.html
index.css

<div class="pai">
    <div>Filho 1</div>
    <div>Filho 2</div>
    <div>Filho 3</div>
</div>
.pai {
    width: 15rem;
    height: 15rem;
    display: flex;
    flex-direction: column-reverse;
}

Qual será a distribuição dos elementos filhos?

Os filhos serão distribuidos na horizontal. O Filho 1 ficará à esquerda e o Filho 3 ficará à direita.

Os filhos serão distribuidos na horizontal. O Filho 3 ficará à esquerda e o Filho 1 ficará à direita.

Os filhos serão distribuidos na vertical. O Filho 1 ficará em cima e o Filho 3 ficará embaixo.

Os filhos serão distribuidos na vertical. O Filho 3 ficará em cima e o Filho 1 ficará embaixo.

Answer

Você pode criar os arquivos HTML e CSS no seu computador e abrir no navegador para visualizar o resultado.

A propriedade justify-content#

A propriedade justify-content definem como os filhos de um elemento flex são posicionados ao longo do eixo principal. NÃO está relacionada ao eixo secundário.

flex-start: Filhos são posicionados no início do eixo principal.
flex-end: Filhos são posicionados no fim do eixo principal. Mas note que isso é diferente de aplicar um flex-direction que termina em reverse, pois nesse caso a ordem dos elementos não fica invertida.
center: Filhos são posicionados no meio do eixo principal.
space-between: Filhos são distribuídos uniformemente ao longo do eixo principal. Não há espaço antes do primeiro, nem depois do último.
space-around: Filhos são distribuídos uniformemente ao longo do eixo principal. Um espaço entre dois filhos é duas vezes maior que o espaço antes do primeiro e que o espaço depois do último.
space-evenly: Filhos são distribuídos uniformemente ao longo do eixo principal. Um espaço entre dois filhos é igual ao espaço antes do primeiro e ao espaço depois do último.

Exercise 3

Modifique o flex-direction e justify-content da classe pai para testar as diferentes combinações de valores. Qual deve ser o valor de flex-direction e justify-content para que os filhos estejam na vertical, com o A em cima, o B no meio e o C embaixo e com o espaço em branco distribuído entre os elementos?

index.css
index.html
base.css

.pai {
  display: flex;
  /* Modifique a linha abaixo */
  flex-direction: row;
  /* Modifique a linha abaixo */
  justify-content: flex-start;
  background-color: silver;
}

.filho {
  background-color: gold;
}
<div class="pai">
  <div class="filho">A</div>
  <div class="filho">B</div>
  <div class="filho">C</div>
</div>
.pai {
  width: 100%;
  height: 100%;
}

.filho {
  margin: 0.5rem;
  padding: 0.5rem;
}

Preview

Resultado esperado

Answer

O valor column faz com que o eixo principal seja vertical e o valor space-between faz com que o espaço disponível seja distribuído uniformemente entre os elementos no eixo principal.

.pai {
  display: flex;
  /* Modifique a linha abaixo */
  flex-direction: column;
  /* Modifique a linha abaixo */
  justify-content: space-between;
  background-color: silver;
}

.filho {
  background-color: gold;
}

Exercise 4

Considere o HTML e CSS a seguir:

index.html
index.css

<div class="pai">
    <div>Filho 1</div>
    <div>Filho 2</div>
    <div>Filho 3</div>
</div>
.pai {
    width: 15rem;
    height: 15rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

Qual será a distribuição dos elementos filhos?

Os filhos serão distribuidos na horizontal agrupados do lado esquerdo do pai.

Os filhos serão distribuidos na horizontal agrupados na parte inferior do pai.

Os filhos serão distribuidos na horizontal agrupados no centro do pai.

Os filhos serão distribuidos na horizontal agrupados na parte superior do pai.

Os filhos serão distribuidos na horizontal agrupados do lado direito do pai.

Answer

Você pode criar os arquivos HTML e CSS no seu computador e abrir no navegador para visualizar o resultado.

A propriedade align-items#

A propriedade align-items define como os filhos de um elemento flex são posicionados ao longo do eixo secundário. NÃO está relacionada ao eixo principal.

flex-start: Filhos são posicionados no início do eixo secundário.
flex-end: Filhos são posicionados no fim do eixo secundário.
center: Filhos são posicionados no meio do eixo secundário.
stretch: Filhos ocupam todo o eixo secundário.

Exercise 5

Modifique o flex-direction e align-items da classe pai para testar as diferentes combinações de valores. Qual deve ser o valor de flex-direction e align-items para que os filhos estejam na vertical, com o A em cima, o B no meio e o C embaixo e alinhados à direita do pai?

index.css
index.html
base.css

.pai {
  display: flex;
  /* Modifique a linha abaixo */
  flex-direction: row;
  /* Modifique a linha abaixo */
  align-items: flex-start;
  background-color: silver;
}

.filho {
  background-color: gold;
}
<div class="pai">
  <div class="filho">A</div>
  <div class="filho">B</div>
  <div class="filho">C</div>
</div>
.pai {
  width: 100%;
  height: 100%;
}

.filho {
  margin: 0.5rem;
  padding: 0.5rem;
}

Preview

Resultado esperado

Answer

O valor column faz com que o eixo principal seja vertical e o valor flex-end na propriedade align-items faz com que o os elementos sejam alinhados no final do eixo secundário. Como o eixo secundário é o horizontal, eles ficam alinhados à direita.

.pai {
  display: flex;
  /* Modifique a linha abaixo */
  flex-direction: column;
  /* Modifique a linha abaixo */
  align-items: flex-end;
  background-color: silver;
}

.filho {
  background-color: gold;
}

Exercise 6

Modifique somente os valores das propriedades flex-direction, justify-content e align-items da classe pai, para obter a imagem abaixo.

index.css
index.html
base.css

.pai {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: silver;
}

.filho {
  background-color: gold;
}
<div class="pai">
  <div class="filho">A</div>
  <div class="filho">B</div>
  <div class="filho">C</div>
</div>
.pai {
  width: 100%;
  height: 100%;
}

.filho {
  margin: 0.5rem;
  padding: 0.5rem;
}

Preview

Resultado esperado

Answer

Existem muitas combinações possíveis apenas com essas 3 propriedades. O posicionamento dos filhos de um elemento flex dependem dos 3 valores juntos, mas veremos na próxima parte que é possível fazer um filho ignorar essas ordens.

.pai {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: center;
  background-color: silver;
}

.filho {
  background-color: gold;
}