¿Cómo puedo alinear elementos hijos dentro de un contenedor Flexbox?

Para alinear elementos hijos (elementos flexibles) dentro de un contenedor Flexbox, CSS te ofrece un conjunto de propiedades muy potente que se aplican principalmente al elemento contenedor (el padre que tiene display: flex; o display: inline-flex;). Las propiedades clave para la alineación son:

1. justify-content:
   • Esta propiedad alinea los ítems flexibles a lo largo del eje principal del contenedor. La dirección del eje principal la define la propiedad flex-direction.
   • Si flex-direction es row (por defecto, los ítems se disponen en una fila horizontal), justify-content controlará la alineación horizontal.
   • Si flex-direction es column (los ítems se disponen en una columna vertical), justify-content controlará la alineación vertical.
   • Valores comunes:
     • flex-start: Alinea los ítems al inicio del eje principal.
     • flex-end: Alinea los ítems al final.
     • center: Centra los ítems en el eje principal.
     • space-between: Distribuye el espacio uniformemente entre los ítems; el primero está al inicio y el último al final.
     • space-around: Distribuye el espacio uniformemente alrededor de cada ítem (los extremos tienen la mitad de espacio que entre ítems).
     • space-evenly: Distribuye el espacio uniformemente entre cada ítem y en los extremos.
2. align-items:
   • Esta propiedad alinea los ítems flexibles a lo largo del eje transversal (el eje perpendicular al principal).
   • Si flex-direction es row, align-items controlará la alineación vertical.
   • Si flex-direction es column, align-items controlará la alineación horizontal.
   • Valores comunes:
     • stretch (valor por defecto): Estira los ítems para que ocupen todo el espacio disponible en el eje transversal (si no tienen un tamaño definido en ese eje).
     • flex-start: Alinea los ítems al inicio del eje transversal.
     • flex-end: Alinea los ítems al final del eje transversal.
     • center: Centra los ítems en el eje transversal.
     • baseline: Alinea los ítems según su línea base de texto.
3. align-self:
   • Esta propiedad se aplica a un ítem flexible individual, no al contenedor. Permite anular el valor de align-items especificado en el contenedor para un ítem específico. Acepta los mismos valores que align-items, más auto (que hereda el valor de align-items del padre).
4. align-content:
   • Esta propiedad solo tiene efecto si hay múltiples líneas de ítems flexibles (es decir, cuando flex-wrap es wrap o wrap-reverse y los ítems ocupan más de una línea).
   • Alinea estas líneas de ítems dentro del contenedor en el eje transversal, distribuyendo el espacio sobrante entre ellas.
   • Valores comunes: Similares a justify-content (flex-start, flex-end, center, space-between, space-around, stretch).

Ejemplo simple para centrar un único hijo:

.contenedor-padre {
  display: flex;
  height: 300px; /* Necesario para que el centrado vertical sea visible */
  width: 300px;  /* Necesario para que el centrado horizontal sea visible */
  border: 1px solid #ccc; /* Para visualización */

  /* Centrado horizontal (en el eje principal por defecto) */
  justify-content: center;

  /* Centrado vertical (en el eje transversal por defecto) */
  align-items: center;
}

.elemento-hijo {
  padding: 20px;
  background-color: lightblue;
}Lenguaje del código: PHP (php)