Neste post não irei entrar em detalhes sobre cada atributo que usamos dentro do flexbox. Darei mais um conceito geral, para melhor entendermos o funcionamento.

O que é?

O Flexbox (CSS Flexible Box Layout), é um conceito do CSS3 que visa organizar elementos de uma página tornando-os "flexíveis". Ou seja independente da dimensão da tela (mobile, desketop e etc.) os elementos se reorganizarão conforme sua necessidade.

Conceito iniciais

O flexbox se resume em um conjunto de propriedades que organiza itens (elementos filhos) dentro de um container (elemento pai).

Os eixos

O flexbox lida com o layout em uma dimensão de cada vez.
Sendo assim ele lida com o eixo horizontal (row) e o eixo vertical (Column).

Através destes eixos poderemos escolher se nosso itens se moverão em direção horizontal (row) ou vertical (column).

Linhas de início e fim

Elas basicamente determinam se você quer alocar seus itens no início ou no fim do seu container.

Quebra de linha

Com flexbox também é possível fazer uma quebra de linha dentro dos nosso containers. Pois como sabemos existem diversas proporções de tela, e muitas vezes o layout inicial não se adaptará em uma tela pequena.
Para não prejudicarmos o layout e desalinhar nossos itens podemos quebrar sua linha, fazendo com que tudo se adapte.

Alinhamento, justificação e distribuição de espaço livre entre os elementos

O atributo chave do flexbox é a capacidade de alinhar e justificar os elementos nos eixos principal e transversal e distribuir o espaço entre eles, através de seus atributos.

Como podemos ver ao decorrer do texto o flexbox é um grande aliado para que possamos fazer layouts mais responsivos independente da plataforma (web / mobile).

Pretendo fazer um post mais futuramente para explicar detalhadamente cada atributo que compõem o flexbox.

Espero que tenham aproveitado a leitura e até a próxima.