Artigo original “A Visual Guide to CSS3 Flexbox Properties” escrito por Dimitar Stojanov, que gentilmente me permitiu traduzi-lo para o nosso idioma.

A propriedade CSS3 Flexbox, oficialmente chamada de CSS Flexible Box Layout Module é um “novo” modelo de layout em CSS3 feito para melhorar o alinhamento, direção e ordenação de itens em um container, mesmo quando estes possuem dimensões diferentes ou desconhecidas.

A principal característica de um container tipo flex é a capacidade de alterar a largura ou altura de seus elementos filhos para preencher o espaço disponível da melhor maneira possível em qualquer resolução de tela.

Flexbox é fácil de implementar. Designers e desenvolvedores não têm maiores dificuldades em criar um layout com Flexbox (exceto pelo suporte de alguns navegadores).
Como o posicionamento dos itens é quase que automático, layouts mais complexos podem ser criados com menos código, tornando o processo de desenvolvimento mais simples.
O algoritmo do Flexbox é baseado nos eixos horizontal (main axis) e vertical (cross axis), ao contrário de layouts em bloco e em linha.
Flexbox deve ser usado em pequenos componentes do projeto enquanto um modelo de grid CSS está surgindo para lidar com layouts maiores.

Melhor que explicar como as propriedades flex funcionam, este guia irá se concentrar em como elas afetam o layout de uma maneira visual.

Introdução

Antes de começarmos descrevendo as propriedades flex vamos dar uma pequena introdução sobre o modelo Flexbox.
Ele é constituído do elemento pai, denominado flex container, e seus respectivos elementos filhos, chamados de flex items.

CSS3 Flexbox model

Na figura acima você pode ver as propriedades e as terminologias empregadas para explicar o flex container e seus flex items.
Para mais informações sobre seus significados, leia o modelo Flexbox oficial do W3C.

O modelo Flexbox passou por muitas iterações e várias mudanças na sua sintaxe desde seu rascunho inicial, em 2009. Então, para evitar confusão e deixar tudo bem claro vamos usar somente a sintaxe da última atualização, de setembro de 2014.

Navegadores que suportam a versão mais recente do Flexbox:

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Android 4.4+
  • Safari 6.1+ (com o prefixo -webkit-)
  • iOS 7.1+ (com o prefixo -webkit-)

Não sabe qual navegador e/ou versão está usando? Clique aqui.

Se você precisa prestar suporte a navegadores mais antigos (leia-se Internet Explorer), leia este artigo.
Visite também o caniuse para informações mais detalhadas sobre suporte dos navegadores.

Teoria e uso

Para usar Flexbox basta aplicar a propriedade display no container:

.flex-container {
    display: -webkit-flex; /* Safari */
    display: flex;
}

Ou, se você quiser aplicá-lo como um elemento em linha, use:

.flex-container {
    display: -webkit-inline-flex; /* Safari */
    display: inline-flex;
}

Esta é a única propriedade que você precisa configurar para o elemento pai, e automaticamente todos os seus filhos imediatos se tornarão flex.

Existem várias formas de agrupar as propriedades flex e, de longe, a maneira mais fácil que encontrei para compreender suas opções e seu uso prático foi dividi-las em dois grupos: Um para o flex container e outro para os flex items.
Abaixo explico todos eles e como eles afetam visualmente o layout.

Propriedades Flexbox para o container

flex-direction

Essa propriedade determina como os itens se acomodam no container dizendo a eles qual direção – e sentido – devem seguir sobre o eixo.

ValorComportamento
rowOs itens são exibidos em linha, da esquerda para a direita
row-reverseOs itens são exibidos em linha, da direita para a esquerda
columnOs itens são exibidos em coluna, de cima para baixo
column-reverseOs itens são exibidos em coluna, de baixo para cima

.flex-container {
    -webkit-flex-direction: row; /* Safari */
            flex-direction: row;
}

Os itens são exibidos em linha, da esquerda para a direita no contexto ltr
Flexbox flex-direction row


.flex-container {
    -webkit-flex-direction: row-reverse; /* Safari */
            flex-direction: row-reverse;
}

Os itens são exibidos em linha, da direita para a esquerda no contexto ltr
Flexbox flex-direction row-reverse


.flex-container {
    -webkit-flex-direction: column; /* Safari */
            flex-direction: column;
}

Os itens são empilhados em coluna, de cima para baixo
Flexbox flex-direction column


.flex-container {
    -webkit-flex-direction: column-reverse; /* Safari */
            flex-direction: column-reverse;
}

Os itens são empilhados em uma coluna, de baixo para cima
Flexbox flex-direction column-reverse

row e row-reverse são dependentes do modo de leitura. Sendo assim, no contexto rtl eles se invertem, respectivamente.

flex-wrap

A premissa do Flexbox parte do pressuposto de que o container deve comportar seus itens em uma única linha.
A propriedade flex-wrap diz ao container se ele os mantém em uma única linha ou não.

ValorComportamento
nowrapOs itens são exibidos em uma única linha preenchendo a largura disponível do container
wrapOs itens são exibidos em múltiplas linhas, da esquerda para a direita e de cima para baixo
wrap-reverseOs itens são exibidos em múltiplas linhas, da esquerda para a direita e de baixo para cima

.flex-container {
    -webkit-flex-wrap: nowrap; /* Safari */
            flex-wrap: nowrap;
}

Itens são exibidos em uma única linha, por padrão eles se comprimem para caber na largura disponível do container
Flexbox flex-wrap nowrap


.flex-container {
    -webkit-flex-wrap: wrap; /* Safari */
            flex-wrap: wrap;
}

Itens são exibidos em múltiplas linhas, da esquerda para a direita e de cima para baixo, caso excedam a largura do container
Flexbox flex-wrap wrap


.flex-container {
    -webkit-flex-wrap: wrap-reverse; /* Safari */
            flex-wrap: wrap-reverse;
}

Itens são exibidos em múltiplas linhas, da esquerda para a direita e de baixo para cima, caso excedam a largura do container
Flexbox flex-wrap wrap-reverse

Essas propriedades são dependentes do modelo de escrita. Sendo assim, no contexto rtl elas se invertem, respectivamente

flex-flow

Essa na verdade é um atalho para definirmos as duas primeiras propriedades que vimos até agora: flex-direction e flex-wrap.

.flex-container {
    -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
            flex-flow: <flex-direction> || <flex-wrap>;
}
Valor padrãoComportamento
row nowrapOs itens são exibidos em uma única linha da esquerda para a direita

justify-content

justify-content trata do alinhamento dos itens ao longo do eixo horizontal do container.

ValorComportamento
flex-startOs itens são alinhados à esquerda do container
flex-endOs itens são alinhados à direita do container
flex-centerOs itens são alinhados ao centro do container
space-betweenDistribui os itens tocando as extremidades do container
space-aroundDistribui os itens sem tocar as extremidades do container

Os dois últimos valores space-between e space-around ajudam a distribuir o espaço quando todos os itens não são flexíveis, ou que são flexíveis mas atingiram seu tamanho máximo.


.flex-container {
    -webkit-justify-content: flex-start; /* Safari */
            justify-content: flex-start;
}

Itens são alinhados à esquerda do container no contexto ltr
Flexbox justify-content flex-start


.flex-container {
    -webkit-justify-content: flex-end; /* Safari */
            justify-content: flex-end;
}

Itens são alinhados à direita do container no contexto ltr
Flexbox justify-content flex-end


.flex-container {
    -webkit-justify-content: center; /* Safari */
            justify-content: center;
}

Itens são centralizados no container
Flexbox justify-content center


.flex-container {
    -webkit-justify-content: space-between; /* Safari */
            justify-content: space-between;
}

Itens são justificados no container de modo a distribuir o espaço entre eles, exceto pelo primeiro e último itens que ficam alinhados com a borda do container
Flexbox justify-content space-between


.flex-container {
    -webkit-justify-content: space-around; /* Safari */
            justify-content: space-around;
}

Similar à propriedade anterior, porém os itens são espaçados igualmente entre eles sem tocar a borda do container
Flexbox justify-content space-around

align-items

Idem à justify-content, porém trata do alinhamento dos itens ao longo do eixo vertical do container.
Essa propriedade define o alinhamento padrão para todos os itens, incluindo os anônimos.

ValorComportamento
stretchItens preenchem toda a altura do container
flex-startItens no topo do container
flex-endItens na base do container
centerItens no centro vertical do container
baselineItens alinhados por suas linhas de base

.flex-container {
    -webkit-align-items: stretch; /* Safari */
            align-items: stretch;
}

Itens preenchem toda a altura do container, do cross start ao cross end
Flexbox align-items stretch


.flex-container {
    -webkit-align-items: flex-start; /* Safari */
            align-items: flex-start;
}

Itens no topo do container, ao longo do cross start
Flexbox align-items flex-start


.flex-container {
    -webkit-align-items: flex-end; /* Safari */
            align-items: flex-end;
}

Itens na base do container, ao longo do cross end
Flexbox align-items flex-end


.flex-container {
    -webkit-align-items: center; /* Safari */
            align-items: center;
}

Itens no centro do cross axis do container
Flexbox align-items center


.flex-container {
    -webkit-align-items: baseline; /* Safari */
            align-items: baseline;
}

Itens são alinhados por suas linhas de base
Flexbox align-items baseline

Leia sobre como é calculado a baseline aqui.

align-content

A propriedade align-content distribui as linhas de itens ao longo do eixo vertical (cross-axis) do container. É similar ao que a justify-content faz com os itens ao longo do eixo horizontal (main-axis).

ValorComportamento
stretchOs itens são exibidos com um espaço após cada linha
flex-startOs itens são exibidos à partir do topo do container
flex-endOs itens são exibidos à partir da base do container
centerOs itens são exibidos no centro vertical do container
space-betweenAs linhas de itens são distribuídas igualmente no espaço vertical tocando as bordas do container
space-aroundAs linhas de itens são distribuídas igualmente no espaço vertical sem tocar as bordas do container

.flex-container {
    -webkit-align-content: stretch; /* Safari */
            align-content: stretch;
}

Itens são exibidos com um espaço após cada linha
Flexbox align-content stretch


.flex-container {
    -webkit-align-content: flex-start; /* Safari */
            align-content: flex-start;
}

Itens são exibidos à partir do topo (cross-start) do container
Flexbox align-content flex-start


.flex-container {
    -webkit-align-content: flex-end; /* Safari */
            align-content: flex-end;
}

Itens são exibidos à partir da base (cross-end) do container
Flexbox align-content flex-end


.flex-container {
    -webkit-align-content: center; /* Safari */
            align-content: center;
}

Itens são exibidos no centro do cross-axis do container
Flexbox align-content center


.flex-container {
    -webkit-align-content: space-between; /* Safari */
            align-content: space-between;
}

As linhas de itens são distribuídas igualmente no espaço vertical do container, exceto pela primeira e última linha, que tocam as bordas superior e inferior do container
Flexbox align-content space-between


.flex-container {
    -webkit-align-content: space-around; /* Safari */
            align-content: space-around;
}

As linhas de itens são distribuídas igualmente no espaço vertical do container
Flexbox align-content space-around

A propriedade align-content só tem efeito quando o container exibir duas ou mais linhas. Se os itens couberem em uma única linha essa propriedade não tem efeito sobre o layout.

Ressalva para flex containers

  • Todas as propriedades column-* não surtem efeito em flex containers
  • Os pseudo elementos ::first-line e ::first-letter não se aplicam a flex containers

Propriedades Flexbox para os itens

Até aqui vimos as propriedades para o flex container. Agora vamos às propriedades para os flex items.

order

A propriedade order determina a ordem em que os itens são exibidos no container.

.flex-item {
    -webkit-order: <integer>; /* Safari */
            order: <integer>;
}

Itens podem ser reordenados sem a necessidade de editar o HTML
Flexbox order

Valor padrãoComportamento
0Exibe os itens normalmente, na ordem do documento

flex-grow

Essa propriedade determina o fator de ampliação do item relativo aos outros itens no container, desde que haja espaço disponível.

.flex-item {
    -webkit-flex-grow: <number>; /* Safari */
            flex-grow: <number>;
}

Se todos os itens têm o mesmo valor para flex-grow, todos terão o mesmo tamanho dentro do container
Flexbox flex-grow 1

Aqui o 3º item ocupa o triplo de espaço em relação aos outros itens
Flexbox flex-grow 2

Valor padrãoComportamento
0Todos os itens com o mesmo tamanho dentro do container

Valores negativos não são aceitos.

flex-shrink

Ao contrário da propriedade anterior, flex-shrink determina o fator de redução do item, relativo aos outros itens no container. Salvo onde seu valor for igual a 0 (zero), quando mantém seu tamanho original.

.flex-item {
    -webkit-flex-shrink: <number>; /* Safari */
            flex-shrink: <number>;
}

Por padrão todos os itens podem ser reduzidos, exceto quando seu valor for igual a 0 (zero)
Flexbox flex-shrink

Valor padrãoComportamento
1Todos os itens com o mesmo tamanho dentro do container

Valores negativos não são aceitos.

flex-basis

Essa propriedade trata dos mesmos valores das propriedades width e height e determina o tamanho inicial do item, antes mesmo do espaço livre ser distribuído no container.

.flex-item {
    -webkit-flex-basis: auto | <width>; /* Safari */
            flex-basis: auto | <width>;
}

flex-basis determina que tamanho deve ter um item
Flexbox flex-basis

Valor padrãoComportamento
autoO tamanho dos itens são iguais

Existe um problema com o valor auto no qual o W3C ainda trabalha em uma solução.

flex

É o atalho para as propriedades flex-grow, flex-shrink e flex-basis.
Entre outros valores, também pode ser ajustada para auto (o mesmo que 1 1 auto) e none (o mesmo que 0 0 auto).

.flex-item {
    -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
            flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}
Valor padrãoComportamento
0 1 autoItens sem ampliação, sem redução e com tamanho original

O W3C orienta usarmos o atalho flex em vez de declararmos as propriedades em separado, pois o atalho reseta corretamente todos os parâmetros de uso mais comuns.

align-self

A propriedade align-self pode substituir individualmente o alinhamento de um item, caso este tenha sido definido para o container em align-items.

.flex-item {
    -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
            align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

O 3º e 4º itens tiveram seu alinhamento substituído pela propriedade align-self
Flexbox align-self

Valor padrãoComportamento
autoAlinha os itens conforme herdado do container

align-self definido como auto herda automaticamente o valor definido em align-items no container. Caso o container não tenha alinhamento definido, os itens serão exibidos como stretch.

Ressalva para flex items

  • float, clear e vertical-align não se aplicam a itens flex.

Playground Flexbox

Acesse esta página com um painel onde você pode explorar o poder do Flexbox combinando várias propriedades para obter layouts complexos.


Acesse o artigo original (em inglês):
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Artigo original “A Visual Guide to CSS3 Flexbox Properties” escrito por Dimitar Stojanov, que gentilmente me permitiu traduzi-lo para o nosso idioma.