CSS align-content Property

Definitie en gebruik

align-content Eigenschapswijziging flex-wrap Het gedrag van de eigenschap. Het is vergelijkbaar met align-items Soortgelijk, maar het lijnt niet de flex items uit, maar de flex lijnen.

Opmerking:Er moeten meerdere rijen items zijn voordat deze eigenschap van kracht is!

Tip:Gebruik justify-content De eigenschap kan items horizontaal uitlijnen op de hoofdas (main-axis).

Zie ook:

CSS TutorialCSS Flexbox

CSS TutorialCSS Grid

CSS Referentiemanualalign-items eigenschap

CSS Referentiemanualalign-self eigenschap

CSS Referentiemanualjustify-content eigenschap

HTML DOM ReferentiemanualalignContent eigenschap

Voorbeeld

Packeer de rijen in het midden van de flex container:

div {
  breedte: 70px;
  hoogte: 300px;
  border: 1px solide #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Probeer het zelf uit

CSS Syntax

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

Eigenschapswaarde

Waarde Beschrijving
stretch Standaardwaarde. Rijen strekken zich uit om de overige ruimte in te nemen.
center Packeer de rijen aan het midden van de flex container.
flex-start Packeer de rijen aan het begin van de flex container.
flex-end Packeer de rijen aan het einde van de flex container.
space-between Rijen worden evenmatig verdeeld in de flex container.
space-around Rijen worden evenmatig verdeeld in de flex container, met elk einde een halve ruimte.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Inherit deze eigenschap van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde: stretch
Inherit: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.alignContent="center"

Browserondersteuning

De nummers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0