justify-content

Índice

Definición de .justify-content en CSS

La propiedad .justify-content es una subproperiedad del módulo de diseño de caja flexible.

Ejemplo de uso : propiedad CSS justify-content

Esta propiedad de CSS normalmente se utiliza de la siguiente manera:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

.flex-item {
  justify-content: center;
}

Otro ejemplo más avanzado de .justify-content es el siguiente de CODEPEN:

Sintaxis de .justify-content en CSS

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

Valores

Valor Descripción Juegalo
arranque flexible Valor por defecto. Los elementos se colocan al principio del contenedor.
extremo flexible Los artículos se colocan al final del contenedor.
centro Los artículos se colocan en el centro del contenedor.
espacio entre Los artículos tendrán espacio entre ellos.
espacio alrededor Los elementos tendrán espacio antes, entre y después de ellos
uniformemente en el espacio Los elementos tendrán el mismo espacio a su alrededor.
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .justify-content

Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
left 1.0 5.5 1.0 1.0 5.0

Bibliografía

Es probable que también quieras echar un vistazo a estas propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso