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.