¿Cómo establecer las propiedades de flexbox?

Se establecen las propiedades para el contenedor (el elemento al que se le aplica display: flex o display: inline-flex) y sus descendientes directos (los elementos dentro del contenedor).

Propiedades para el contenedor:

display: Define que el elemento es un contenedor flex. Valores posibles: flex (de bloque) y inline-flex (en línea).
flex-direction: Establece la dirección del eje principal en el que se colocan los elementos flex. Valores posibles: row (por defecto, de izquierda a derecha), row-reverse (de derecha a izquierda), column (de arriba hacia abajo), column-reverse (de abajo hacia arriba).
flex-wrap: Controla si los elementos flex se envuelven en una nueva línea si exceden los límites del contenedor. Valores posibles: nowrap (por defecto, sin envoltura), wrap (envolver en una nueva línea), wrap-reverse (envolver en una línea en orden inverso).
justify-content: Alinea los elementos flex a lo largo del eje principal. Valores posibles: flex-start (inicio del contenedor), flex-end (fin del contenedor), center, space-between (espacio uniforme entre elementos, primero al inicio, último al final), space-around (espacio uniforme alrededor de cada elemento).
align-items: Alinea los elementos flex a lo largo del eje transversal. Valores posibles: stretch (por defecto, estira los elementos a lo largo de la altura del contenedor), flex-start (inicio del contenedor en el eje transversal), flex-end (fin del contenedor en el eje transversal), center, baseline (alineación en la línea base del texto).
align-content: Alinea las líneas de elementos flex (cuando se usa flex-wrap) a lo largo del eje transversal. No afecta si hay solo una línea. Valores posibles: stretch (por defecto), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Establecen la distancia entre los elementos flex a lo largo de los ejes principal y transversal.

Propiedades para los elementos (descendientes directos del contenedor flex):

order: Define el orden en que se colocan los elementos dentro del contenedor. Por defecto, todos tienen order: 0. Los elementos con menor valor de order se colocan antes.
flex-grow: Define en cuántas veces puede crecer un elemento en relación con otros en caso de espacio libre. Por defecto, 0 (no crece).
flex-shrink: Define en cuántas veces puede reducirse un elemento en caso de falta de espacio. Por defecto, 1 (se reduce).
flex-basis: Establece el tamaño inicial del elemento antes de distribuir el espacio libre. Puede ser en píxeles, porcentajes o auto. Por defecto, auto.
flex: Propiedad abreviada para flex-grow, flex-shrink y flex-basis. Por ejemplo, flex: 1 1 auto;.
align-self: Sobrescribe el valor de align-items para un elemento individual. Valores posibles: auto (usa el valor de align-items del padre), stretch, flex-start, flex-end, center, baseline.

Ejemplo:

.flex-container {
  display: flex; /* Convertimos el elemento en un contenedor flex */
  flex-direction: row; /* Coloca los elementos en fila */
  justify-content: center; /* Alinea los elementos en el centro del eje principal */
  align-items: center; /* Alinea los elementos en el centro del eje transversal */
  gap: 10px; /* Establece la distancia entre los elementos */
}

.flex-item {
  flex-grow: 1; /* El elemento puede crecer */
  flex-basis: 100px; /* Tamaño inicial del elemento */
}

.special-item {
  order: -1; /* Este elemento será el primero */
  align-self: flex-end; /* Sobrescribe la alineación en el eje transversal para este elemento */
}