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.