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.

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.