CSS 3: Flex (Filho)#

As propriedades da página anterior definem de maneira global como devem ser os tamanhos e posições dos filhos de um elemento flex. Também podemos definir esses tamanhos e posições de maneira local, ou seja, filho a filho. Isso é particularmente útil para fazer "fine tuning" do flex, ou seja, abrir exceções para filhos específicos.

Cabe observar que essas exceções devem ser pontuais. Se elas forem abertas para para muitos filhos, o processo acaba ficando parecido com usar width, height e position diretamente. E isso acaba anulando a vantagem de usar flex.

Algumas observações fundamentais#

As propriedades desta página devem ser aplicadas sobre um elemento que é filho de um elemento flex. Se o pai não for um elemento flex, essas propriedades não têm efeito.
Todos os exemplos desta página consideram que o pai tem as propriedades padrão justify-content: flex-start e align-items: flex-start.
Esta página descreve as propriedades que consideramos mais úteis, mas não todas. Para saber mais, recomendamos A Complete Guide to Flexbox.

A propriedade order#

A propriedade order é um inteiro que representa a ordem em que o filho deve ser posicionado ao longo do eixo principal. Por padrão, esse inteiro é zero. Os filhos são posicionados em ordem crescente deles e, nos casos de empate, pela ordem em que aparecem no código HTML.

Exercise 1

Atualize o valor de flex-direction para column. Modificando apenas o valor das propriedades order, faça com que a ordem dos elementos filhos (de cima para baixo) seja: C, A, B.

index.css
index.html
base.css

.pai {
  display: flex;
  flex-direction: row;
  background-color: silver;
}

.filho {
  background-color: gold;
}

.a {
  order: 0;
}

.b {
  order: 1;
}

.c {
  order: 0;
}
<div class="pai">
  <div class="filho a">A</div>
  <div class="filho b">B</div>
  <div class="filho c">C</div>
</div>
p {
  margin: 1rem 1rem 0;
}

.pai {
  height: 200px;
  padding: 0.5rem;
}

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

Preview

Resultado esperado

Answer

A propriedade order define a ordem no eixo principal.

.pai {
  display: flex;
  flex-direction: column;
  background-color: silver;
}

.filho {
  background-color: gold;
}

.a {
  order: 1;
}

.b {
  order: 2;
}

.c {
  order: 0;
}

Repare no quanto a linguagem CSS é poderosa: nada, nem mesmo a ordem de digitação dos elementos no código HTML, é sagrado. Praticamente tudo pode ser mudado.

Exercise 2

Answer

A propriedade order só é considerada se o elemento pai for flex. Nesse caso o pai não possui um valor definido para display, portanto ele é um block. Se o pai fosse um flex, a alternativa correta seria a D.

A propriedade flex-grow#

A propriedade flex-grow é um inteiro que representa o quanto o filho deve crescer ao longo do eixo principal para ocupar o espaço livre. Zero significa que não deve crescer e um valor positivo representa o peso com que ele deve crescer. Nos dois exemplos abaixo, o elemento A cresce com peso 1, o elemento B cresce com peso 2 e o elemento C não cresce (peso 0).

Exemplo com flex-direction: row no pai.

Exercise 3

Atualize o valor de flex-direction para column. Modificando apenas o valor das propriedades flex-grow, faça com que os elementos A e C dividam o espaço livre igualmente e o elemento B não cresça.

index.css
index.html
base.css

.pai {
  display: flex;
  flex-direction: row;
  background-color: silver;
}

.a {
  flex-grow: 1;
}

.b {
  flex-grow: 2;
}

.c {
  flex-grow: 0;
}

.filho {
  background-color: gold;
}
<div class="pai">
  <div class="filho a">A</div>
  <div class="filho b">B</div>
  <div class="filho c">C</div>
</div>
p {
  margin: 1rem 1rem 0;
}

.pai {
  height: 200px;
  padding: 0.5rem;
}

.filho {
  margin: 0.5rem;
  padding: 0.5rem;
  background-color: gold;
}

Preview

Resultado esperado

Answer

A propriedade flex-grow define como o espaço livre do eixo principal deve ser distribuído entre os filhos.

.pai {
  display: flex;
  flex-direction: column;
  background-color: silver;
}

.a {
  flex-grow: 1;
}

.b {
  flex-grow: 0;
}

.c {
  flex-grow: 1;
}

.filho {
  background-color: gold;
}

Repare que, se você aplicar flex-direction: column no pai e flex-grow: 1 só no elemento B, você ganha de graça um layout para a combinação header-main-footer.

A propriedade align-self#

A propriedade align-self permite a cada filho ignorar a propriedade align-items da página anterior e definir um jeito próprio de se posicionar ao longo do eixo secundário. Naturalmente, as opções de valor são as mesmas de align-items.

Exercise 4

Atualize o valor de flex-direction para column.

index.css
index.html
base.css

.pai {
  display: flex;
  flex-direction: row;
  background-color: silver;
}

.a {
  align-self: flex-start;
}

.b {
  align-self: flex-end;
}

.c {
  align-self: center;
}

.filho {
  background-color: gold;
}
<div class="pai">
  <div class="filho a">A</div>
  <div class="filho b">B</div>
  <div class="filho c">C</div>
</div>
p {
  margin: 1rem 1rem 0;
}

.pai {
  height: 200px;
  padding: 0.5rem;
}

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

Preview

Ao trocar a direção para coluna, qual elemento ficou mais à direita?

A

Estão todos na mesma posição horizontal

B

C

Answer

A propriedade align-self define como o elemento será posicionado no eixo secundário do seu pai (caso ele seja flex).

Mas cabe de novo a observação de que, se tudo é exceção, então nada é exceção. Se você precisa definir align-self para a maioria dos filhos, alguma coisa está meio estranha.