CSS align-items Eigenschap

Definitie en gebruik

align-items eigenschap om de standaard uitlijning van items in een flexibele container te specificeren.

Tip:Gebruik de eigenschap van elk item align-self eigenschappen om deze align-items-eigenschap te overschrijven.

Zie ook:

CSS cursus:CSS Grid

CSS cursus:CSS Flexbox

CSS referentiemanual:align-content-eigenschap

CSS referentiemanual:align-self-eigenschap

CSS referentiemanual:justify-content-eigenschap

CSS referentiemanual:justify-items-eigenschap

CSS referentiemanual:justify-self-eigenschap

HTML DOM referentiemanual:alignItems-eigenschap

Voorbeeld

Centreer alle items van de flexibele <div>-elementen:

div {
  display: flex;
  align-items: center;
}

Probeer het zelf uit

CSS syntaxis

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
stretch Standaard. De item wordt uitgerekt om de container te passen.
center De item bevindt zich in het midden van de container.
flex-start De item bevindt zich aan het begin van de container.
flex-end De item bevindt zich aan het einde van de container.
baseline De item wordt geplaatst op de baslijn van de container.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg: initial.
inherit Deze eigenschap wordt van de ouderlijke elementen geërfd. Raadpleeg: inherit.

Technische details

Standaardwaarde: stretch
Inherits: Nee
Animatieproductie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.alignItems="center"

Browserondersteuning

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

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