Primeiramente para que você consiga usar as propriedades do Flex-box, você precisa atribuir a propriedade CSS "display" com os valores flex(na maioria dos casos) ou inline-flex no elemento pai.

Eixo principal - (flex-direction)

Podemos definir a posição do flex-container com a propriedade "flex-direction" e podemos ultilizar os seguntes valores:

• row - é o padão, deixa os elementos em comprimento de linha da esquerda para a direita.
• row-reverse - trás os itens em linha da direita para a esquerda.
• column - é parecido com o row porém trás os itens em coluna de cima para baixo.
• column-reverse - trás os itens em coluna de baixo para cima.

Quebra de linha - (flex-wrap)

Podemos definir uma quebra de linha para os itens do Flex-box usando "flex-wrap" e os valores: nowrap, wrap, wrap-reverse.

• nowrap - é o padrão e faz com que todos os itens fiquem em uma linha só.
• wrap - os itens quebram de linha de cima para baixo.
• wrap-reverse - os itens quebram de linha de baixo para cima.

Declaração com varios valores para layout - (flex-flow)

Temos a opção de usar a propriedade "flex-flow" para definir tanto a quebra de linha quanto a direção do eixo.

Alinhamento dos itens no eixo principal - ( justify-content)

Os itens são alinhados de acordo com a configuração do flex-container, para distribuir o espaço livre entre os itens.

• flex-start - é o padrão e alinha os itens junto a borda de inicio do flex-container.
• flex-end - os itens são alinhados junto a borda final do flex-container.
• center - os itens são centralizados no flex-container.
• space-between - os itens são distribuidos de forma igual ao logo da linha e o primeiro e o último item ficam colados as respectivas bordas.
• space-around - os itens são distribuidos com o mesmo espaço entre eles de acordo com o tamanho dos itens.
• space-evenly - os itens são distribuidos de forma igual ao logo da linha.

Alinhamento de itens no eixo secundario - (align-items)

É bem parecido com o justify-content porém altera o layout dos itens de acordo com o eixo secundario.

• flex-start - os itens são colocados no inicio do eixo secundario.
• flex-end - os itens são colocados no final do eixo secundario.
• center - centraliza os itens no meio do eixo secundario.
• stretch - é o padrão estica os itens para preencher o espaço do flex-container.
• baseline - os itens são alinhados conforme as linhas de texto dos itens.

Organizar linhas - (align-content)

Organiza as linhas do flex-container quando há espaço extra no eixo secundario.

• flex-start - os itens são alinhados no inicio início do container, levando em consideração o flex-direction.
• flex-end - os itens são alinhados no final do container, levando em consideração o flex-direction.
• center - centraliza os itens no flex-container.
• space-between - as linhas são destribuidas de forma igual no flex-container, a primeira e a segunda linha juntas a borda do flex-container.
• space-around - as linhas ficam com o mesmo espaçamento.
• space-evenly - os itens são distribuidos igualmente com o mesmo espaçamento entre eles.
• stretch - é o padrão, os itens de cada linha se esticam para ocupar o espaço entre as linhas.

Propriedades gap -(gap, row-gap, column-gap)

Essas propriedades nos permitem definir especificamente a distancia entre os itens, porém apenas entre os itens.

gap: 10px;

gap: 10px 20px;

row-gap: 10px;

column-gap: 20px;

Determina a ordem - (Order)

Por padrão os itens são colocados pela ordem do código, mas essa propriedade controla a ordem que os elementos apareçem.

order: < número >;

Habilita crescimento - (flex-grow)

Ele permite que o item consiga crescer se nescessário. o indice em todos os itens definem o quanto eles ocuparão do container.

flex-grow: < numero >;

Habilidade de encolher - (flex-shrink)

Ele permite que o item consiga encolher se nescessário.

flex-shrink: < número >;

- Flex-basis

Define um tamanho padrão para um elemento antes do espaço do container ser distribuído, usa-se medidas de comprimentos ou palavra chave.

flex-basis: flex-basis: cumprimento ou chave;

Declaração com varios valores para Habilidades de itens - (flex)

Essa propriedade é recomendada para não ter que definir uma das propriedades separadamente.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

align-itens para um único item - (align-self)

Permite definir um alinhamento especifico para um determinado item.

align-self: auto | flex-start | flex-end | center | baseline | stretch;