Atributo CSS justify-content

Definición y uso

justify-content atributo (horizontal) alinea los elementos del contenedor flexible, cuando los elementos no ocupan todo el espacio disponible en el eje principal.

Consejo:Por favor utilice align-items atributo Alineación vertical de los elementos del atributo.

Por favor, consulte:

CSS Guía:Flexbox de CSS

CSS Guía:CSS Grid

CSS 参考手册：align-content atributo

CSS 参考手册：align-items atributo

CSS 参考手册：Manual de referencia de CSS:

Propiedad align-selfManual de referencia de HTML DOM:

justify-content: space-between;

Propiedad justifyContent

Mostrar elementos flexibles con espaciado antes, entre y después de la línea:
  div {
  Alinear elementos flexibles en el centro del contenedor:
justify-content: space-around;

}

justify-content: center;

Puede encontrar más ejemplos TIY en la parte inferior de la página.

Sintaxis de CSS

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

Valor del atributo Valor
Valor por defecto: Descripción
Valor por defecto. Los elementos están ubicados en el principio del contenedor. flex-end
Los elementos están ubicados en el extremo final del contenedor. center
Los elementos están ubicados en el centro del contenedor. space-between
Los elementos tienen espacio entre las líneas. space-around
Establecer este atributo a su valor por defecto. Ver: Los elementos dejan espacio antes, entre y después de la línea. Establecer este atributo a su valor por defecto. Ver:Atributos relacionados con la animación
Heredar este atributo de su elemento padre. Ver: initial Heredar este atributo de su elemento padre. Ver:Atributos relacionados con la animación

inherit

Detalles técnicos Valor por defecto:
flex-start Herencia:
No Producción de animación:No se admite. Consulte:Atributos relacionados con la animación
。 Versión:
CSS3 Sintaxis de JavaScript:

object.style.justifyContent="space-between"

justify-content: space-between;

Más ejemplos

Mostrar elementos flexibles con espaciado antes, entre y después de la línea:
  div {
  Alinear elementos flexibles en el principio del contenedor (por defecto):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Mostrar elementos flexibles con espaciado antes, entre y después de la línea:
  div {
  Alinear elementos flexibles en el extremo final del contenedor:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Mostrar elementos flexibles con espaciado antes, entre y después de la línea:
  div {
  Mostrar elementos flexibles con espaciado entre las líneas:
justify-content: space-around;

}

justify-content: space-between;

Ejemplo

Mostrar elementos flexibles con espaciado antes, entre y después de la línea:
  div {
  display: flex;
justify-content: space-around;

}

Probar personalmente

Soporte del navegador

Las cifras en la tabla indican la primera versión del navegador que admite completamente la propiedad, utilizando el prefijo definido por -webkit- o -moz-.

propiedad Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0