CSS Justify-content

La propiedad CSS justify-content es utilizada para alinear los elementos dentro de un contenedor flex (elementos con la propiedad display: flex establecida) en el eje principal, que es el eje horizontal (izquierda-derecha) por defecto.

Esta propiedad nos permite controlar cómo los elementos hijos se distribuyen dentro del contenedor padre.

Tabla de contenidos

Valores

Esta propiedad tiene varios posibles valores:

  • flex-start: los elementos se alinean al comienzo del contenedor.
  • flex-end: los elementos se alinean al final del contenedor.
  • center: los elementos se centran dentro del contenedor.
  • space-between: los elementos se distribuyen de manera equitativa entre el comienzo y el final del contenedor, con espacio igual entre ellos.
  • space-around: los elementos se distribuyen de manera equitativa entre el comienzo y el final del contenedor, con espacio igual alrededor de cada elemento.

Ejemplo de uso

Por ejemplo, el siguiente código centraría horizontalmente los elementos dentro del contenedor:

.container {
   display: flex;
   justify-content: center;
}
Lenguaje del código: CSS (css)

En este ejemplo, todos los elementos dentro del contenedor con clase “container” se alinearán en el centro del contenedor.

Más ejemplos:

Aquí te presento algunos ejemplos de cómo se verían los diferentes valores de la propiedad justify-content en un contenedor flex:

  • flex-start (valor predeterminado):
.container {
  display: flex;
  justify-content: flex-start; /* valor predeterminado */
}
Lenguaje del código: CSS (css)
  • flex-end:
.container {
  display: flex;
  justify-content: flex-end;
}
Lenguaje del código: CSS (css)
  • center:
.container {
  display: flex;
  justify-content: center;
}
Lenguaje del código: CSS (css)
  • space-between:
.container {
  display: flex;
  justify-content: space-between;
}
Lenguaje del código: CSS (css)
  • space-around:
.container {
  display: flex;
  justify-content: space-around;
}
Lenguaje del código: CSS (css)

Ten en cuenta que estos ejemplos son solo una muestra de cómo se ven los diferentes valores de justify-content, y que la apariencia final dependerá de otros estilos que se apliquen al contenedor y a los elementos hijos.