Map 1
Flexbox
  Flex Container
    flex-direction
      row
      row-reverse
      column
      column-reverse
    flex-wrap
      nowrap
      wrap
      wrap-reverse
    flex-flow
      row nowrap
      row wrap
      column nowrap
    justify-content
      flex-start
      flex-end
      center
      space-between
      space-around
    align-items
      stretch
      flex-start
      flex-end
      center
      baseline
    align-content
      stretch
      flex-start
      flex-end
      center
      space-between
      space-around
  Flex Items
    flex-basis
      auto
      unidade
      0
    flex-grow
      nº qualquer
      0
    flex-shrink
      1
      0
      nº qualquer
    flex
      1
      0 1 auto
      2
      4 2 100px
    order
      nº qualquer
      0
    align-self
      auto
      flex-start
      flex-end
      center
      baseline
      stretch
Para adicionar wrap em coluna, o container precisa ter uma altura máxima, ai as colunas vão quebrar para o lado especificado
Alinha os itens de acordo com a linha base da tipografia.
But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here's an example for align-content: space-around;:
Cria um espaçamento entre as linhas/colunas de todo o conteúdo
Define a largura/atura inicial, antes de dividir o espaçamento extra, é meio que uma largura mínima
Divide o espaço extra do container
Então se for setado para 2 por exemplo, pega 2x o espaço extra do outro item
Define a capacidade de redução de tamanho do item.
É basicamente, o que fazemos quando não há espaço extra?
flex-grow, flex-shrink e flex-basis.