es
en

justify-content & align-items (column)

justify-content (column)

justify-content en un contenedor con flex-direction: column, alinea los elementos hijos verticalmente dentro del contenedor flex.

flex-start (predeterminado): Alinea todos los elementos arriba del contenedor.
center: Centra los elementos verticalmente.
flex-end: Alinea todos los elementos abajo del contenedor.
space-between: Primer elemento arriba, último abajo, los demás repartidos.
space-around: Mismo espacio alrededor de cada elemento, con la mitad en los bordes.
space-evenly: Mismo espacio entre los elementos y su alrededor.

align-items (column)

align-items en un contenedor con flex-direction: column, alinea los elementos hijos horizontalmente.

stretch (predeterminado): Los elementos se estiran horizontalmente al ancho del contenedor (si no tienen width fijo).
flex-start: Alinea todos los elementos a la izquierda.
center: Centra los elementos horizontalmente.
flex-end: Alinea todos los elementos a la derecha.

Ejemplo

Con este ejemplo dinámico puedes ver las distintas disposiciones de los elementos hijos al modificar las propiedades justify-content y align-items en los selectores.

Selecciona align-items:

stretchflex-startcenterflex-end

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

<div class="container">
  <span class="child-1">1</span>
  <span class="child-2">2</span>
  <span class="child-3">3</span>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex-direction: column;
  height: 15rem;
  justify-content: flex-start;
  padding: 0.5rem;
}

.child-1 {
  padding: 0.5rem;
}

.child-2 {
  padding: 1rem;
}

.child-3 {
  padding: 2rem;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: stretch;
  flex-direction: column;
  height: 15rem;
  justify-content: flex-start;
  padding: 0.5rem;
}

.child-1 {
  padding: 0.5rem;
}

.child-2 {
  padding: 1rem;
}

.child-3 {
  padding: 2rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.