CSS justify-content eigenschap

Definitie en gebruik

justify-content eigenschap (horizontaal) uitlijnt de items van een flexibele container, wanneer de items niet alle beschikbare ruimte op de hoofdas innemen.

Tip:Gebruik align-items eigenschap Eigenschap voor het verticaal uitlijnen van items.

Zie ook:

CSS Handleiding:CSS flexbox

CSS Handleiding:CSS Grid

CSS 参考手册：align-content eigenschap

CSS 参考手册：align-items eigenschap

CSS 参考手册：align-self 属性

CSS referentiemanual:align-self eigenschap

justify-content: space-between;

HTML DOM referentiemanual:

Tonen met afstand tussen de flexibele items voor, tussen en achter de regels:
  div {
  justifyContent eigenschap
justify-content: space-around;

}

justify-content: center;

Meer TIY voorbeelden zijn te vinden onderaan de pagina.

CSS syntaxis

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

eigenschapswaarde waarde
standaardwaarde: beschrijving
standaardwaarde. Items zijn aan het begin van de container. flex-end
items zijn aan het einde van de container. center
items zijn in het midden van de container. space-between
items hebben een afstand tussen de regels. space-around
Stel deze eigenschap in op de standaardwaarde. Zie ook items laten ruimte achter voor, tussen en achter de regels. Stel deze eigenschap in op de standaardwaarde. Zie ookanimatiegerelateerde eigenschappen
Deze eigenschap erft van de ouderlijke element. initial Deze eigenschap erft van de ouderlijke element.animatiegerelateerde eigenschappen

inherit

technische details standaardwaarde:
flex-start inheritance:
nee animatie maken:niet ondersteund. Zie ook:animatiegerelateerde eigenschappen
。 versie:
CSS3 JavaScript syntaxis:

object.style.justifyContent="space-between"

justify-content: space-between;

meer voorbeelden

Tonen met afstand tussen de flexibele items voor, tussen en achter de regels:
  div {
  Richten van de flexibele items aan het begin van de container (standaard):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Tonen met afstand tussen de flexibele items voor, tussen en achter de regels:
  div {
  Richten van de flexibele items aan het einde van het container:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Tonen met afstand tussen de flexibele items voor, tussen en achter de regels:
  div {
  Tonen met afstand tussen de flexibele items tussen de regels:
justify-content: space-around;

}

justify-content: space-between;

voorbeeld

Tonen met afstand tussen de flexibele items voor, tussen en achter de regels:
  div {
  display: flex;
justify-content: space-around;

}

probeer het zelf

BROWSER ONDERSTEUNING

De cijfers in de tabel geven de eerste browserversie aan die deze eigenschap volledig ondersteunt.

eigenschap 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