Informações com referências de cursos da Alura, site da MDN e de um projeto feito na ORIGAMID, o qual não sou autor. As refências do mesmo e outras informações podem ser encontradas no rodapé próprio site.

Pergunte para as tags, ou classes, quem é o pai. A tag/classe pai deverá receber no CSS o seguinte parâmetro:

classe-pai {
  display: flex;
}

Obs.: Classes filhos ficarão com tamanhos iguais caso o pai receba display flex.

Para esta ação, devemos apenas adicionar o seguinte parâmetro a classe pai:

classe-pai {
    ...
  align-items: center;
}

Nesse caso, precisamos ter um espaço em restante no espaço pai. Por exemplo:

Utilizaremos o parâmetro:

classe-pai {
    ...
  justify-content: space-between;
}

O resultado será:

Para isso, utilizaremos um parâmetro parecido com o anterior:

classe-pai {
    ...
  justify-content: space-around;
}

Lembrando que para utilizar comandos flex, precisamos que a classe pai, referente ao filho que estamos trabalhando, receba display: flex;. Com isso feito, utilizaremos flex-direction, o qual define a direção dos itens. Para esse caso utilizaremos a propriedade column. Ela separa cada item do pai em colunas.

Obs: Por padrão de sistema, o flex-direction tem como parâmetro row, ou seja, em linha.

Para isso, utilizaremos o comando flex-wrap. Esse comando poderá receber 3 parâmetros:

 {
  flex-wrap: nowrap;
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}

Lembrando que é recomendável que o elemento pai tenha um valor de altura.

Para usar flex-direction e flex-wrap de uma vez só podemos utilizar o flex-flow. Ele recebe dois parâmetros, o primeiro indicará se é uma coluna ou uma linha, o segundo se é um quebra linha ou não:

 {
  flex-flow: [row/column] [wrap/nowrap];
}

Para alterar a ordem precisamos usar o order: n. Por padrão, os itens flex possuem um order: 0;. Se temos apenas um item que quermos colocar antes de todos os outros itens, colocamos order: -1;, e para colocá-lo na última posição colocamos order: 1;. Podemos também utilizar para ordenar conforme uma base de números que escolhermos, por exemplo:

• item 3: order: 1
• item 5: order: 1
• item 1: order: 2
• item 2: order: 3
• item 4: order: 3

Infelizmente o flexbox não tem um cogumelo, mas podemos usar o flex-grow: n;. Devemos dar um número para definir a proporção que o item irá crescer. Por padrão o flex-grow tem 0 como valor. Se dois itens filhos do mesmo pai estiverem utilizando flex grow, o espaço será dividido proporcionalmente com o valor que colocar no item.

O flex-shrink: n; faz esse trabalho para a gente. Ao diminuir a resolução da tela, ele faz o trabalho de diminuir certos itens mais do que os outros, sendo que ele recebe um valor proporcional também, como no flex-grow

 {
  display: flex; => Necessário para o funcionamento do flexbox
  flex-direction: ;
  justify-content: ;
  flex-wrap: ;
  flex-flow: ;
  align-items: ;
  align-content: ;
}

 {
  order: ;
  flex-grow: ;
  flex-shrink: ;
  flex-basis: ;
  flex: ;
  align-self: ;
}