Introdução

Flexbox é um modulo da CSS3 que define um novo box model otimizado para interfaces, ou seja, agora temos uma especificação focada em interfaces, nada de floats ou tabelas aqui.

Quando pensamos em nossos desenhos, flexbox cai como uma luva poupando muito tempo em nosas vidas divertidas.

Nota: Não abordaremos as propriedades relativas aos flex items nesse post. Para quem se interessar, podem se aprofundar mais no awesome-flexbox.

Flex container

Flexbox trata principalmente de containers, que são criados com as propriedades display: flex; e display: inline-flex;. Quando uma div é transformada em um flex container seus filhos são automagicamente transformados em flex items.

display

Primeiro criamos um container com três elementos, até ai nada de novo.

Agora vamos começar a magia.

display: flex;

Parece simples, mas colocar uma div ao lado de outra é o maior desafio da humanidade desde o início dos tempos. Na pré-história usamos tables, na idade média float e agora na era moderna usamos flexbox ;)

display: inline-flex;

O mesmo efeito da propriedade anterior, porém nosso flex container se comporta com um elemento inline.

Nota: A partir daqui explicarei o objetivo de cada propriedade e deixarei seus valores possíveis listados, assim vocês podem brincar e fazer as mágias com suas próprias mãos ;)

flex-direction

Defini a direção em que os flex items são posicionados no flex container.

Opções:

  • flex-direction: row; (default)
  • flex-direction: row-reverse;
  • flex-direction: column;
  • flex-direction: column-reverse;

flex-wrap

Define se o container irá suportar multiplas linhas ou não.

Opções:

  • flex-wrap: nowrap; (default)
  • flex-wrap: wrap;
  • flex-wrap: wrap-reverse;

justify-content

Alinha o conteúdo horizontalmente.

Opções:

  • justify-content: flex-start; (default)
  • justify-content: flex-end;
  • justify-content: center;
  • justify-content: space-between;
  • justify-content: space-around;

align-items

Alinha o conteúdo verticalmente.

Opções:

  • align-items: flex-start; (default)
  • align-items: flex-end;
  • align-items: center;
  • align-items: baseline;
  • align-items: stretch;

align-content

Alinha o conteúdo verticalmente no contexto wrap, onde existem multiplas linhas.

Opções:

  • align-content: flex-start; (default)
  • align-content: flex-end;
  • align-content: center;
  • align-content: space-between;
  • align-content: space-around;
  • align-content: stretch;

Conclusão

Eu sempre costumo dizer que Flexbox não é o futuro, mas sim o presente!

Não se preocupem em aprender tudo de uma vez, usem esse post como referência para testarem e brincarem cada vez mais, que vai dar tudo certo.

Lembrando que em caso de dúvidas podem comentar aqui :)

Até amanhã.

<-- #8 - Animações (parte 2) | Lista completa | #10 - Hora do Finn -->


1,143 2 3