Como definir as propriedades do flexbox?

São definidas propriedades para o contêiner (o elemento ao qual se aplica display: flex ou display: inline-flex) e seus descendentes diretos (os elementos dentro do contêiner).

Propriedades para o contêiner:

display: Define que o elemento é um contêiner flex. Valores possíveis: flex (bloco) e inline-flex (em linha).
flex-direction: Define a direção do eixo principal na qual os elementos flex são dispostos. Valores possíveis: row (por padrão, da esquerda para a direita), row-reverse (da direita para a esquerda), column (de cima para baixo), column-reverse (de baixo para cima).
flex-wrap: Controla se os elementos flex quebram para uma nova linha se excederem os limites do contêiner. Valores possíveis: nowrap (por padrão, sem quebra), wrap (quebra para uma nova linha), wrap-reverse (quebra em ordem inversa).
justify-content: Alinha os elementos flex ao longo do eixo principal. Valores possíveis: flex-start (início do contêiner), flex-end (fim do contêiner), center, space-between (espaço uniforme entre os elementos, primeiro no início, último no fim), space-around (espaço uniforme ao redor de cada elemento).
align-items: Alinha os elementos flex ao longo do eixo transversal. Valores possíveis: stretch (por padrão, estica os elementos na altura do contêiner), flex-start (início do contêiner no eixo transversal), flex-end (fim do contêiner no eixo transversal), center, baseline (alinhamento na linha de base do texto).
align-content: Alinha as linhas de elementos flex (quando flex-wrap é usado) ao longo do eixo transversal. Não afeta se houver apenas uma linha. Valores possíveis: stretch (por padrão), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Definem a distância entre os elementos flex ao longo dos eixos principal e transversal.

Propriedades para os elementos (descendentes diretos do contêiner flex):

order: Define a ordem de disposição do elemento dentro do contêiner. Por padrão, todos têm order: 0. Elementos com menor valor de order são colocados antes.
flex-grow: Define em quantas vezes o elemento pode crescer em relação aos outros em caso de espaço livre. Por padrão, 0 (não cresce).
flex-shrink: Define em quantas vezes o elemento pode diminuir em caso de falta de espaço. Por padrão, 1 (diminui).
flex-basis: Define o tamanho inicial do elemento antes da distribuição do espaço livre. Pode ser em pixels, porcentagens ou auto. Por padrão, auto.
flex: Propriedade abreviada para flex-grow, flex-shrink e flex-basis. Por exemplo, flex: 1 1 auto;.
align-self: Redefine o valor de align-items para um elemento individual. Valores possíveis: auto (usa o valor de align-items do pai), stretch, flex-start, flex-end, center, baseline.

Exemplo:

.flex-container {
  display: flex; /* Torna o elemento um contêiner flex */
  flex-direction: row; /* Dispor os elementos em linha */
  justify-content: center; /* Alinha os elementos ao centro do eixo principal */
  align-items: center; /* Alinha os elementos ao centro do eixo transversal */
  gap: 10px; /* Define o espaçamento entre os elementos */
}

.flex-item {
  flex-grow: 1; /* O elemento pode crescer */
  flex-basis: 100px; /* Tamanho inicial do elemento */
}

.special-item {
  order: -1; /* Este elemento será colocado primeiro */
  align-self: flex-end; /* Redefine o alinhamento transversal para este elemento */
}