CSS align-self Property

Definitie en gebruik

align-self Deze eigenschap specificeert de manier waarop het geselecteerde item in de flex-container wordt uitgelijnd.

Let op:De align-self eigenschap neemt de eigenschappen van de flex-container over. align-items Eigenschappen.

Zie ook:

CSS handleiding:CSS Grid

CSS handleiding:CSS Flexbox

CSS referentiehandleiding:alignContent eigenschap

CSS referentiehandleiding:alignItems eigenschap

CSS referentiehandleiding:justifySelf eigenschap

HTML DOM referentiehandleiding:alignSelf eigenschap

Voorbeeld

Plaats een van de items binnen de flex-eigenschap centrair:

#myBlueDiv {
  align-self: center;
}

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Standaard. Het element erfdeigenschappen van de align-items eigenschap van de ouder-container, indien er geen ouder-container is, is het "stretch".
stretch Het element wordt uitgerekt om de container aan te passen.
center Het element bevindt zich in het midden van de container.
flex-start Het element bevindt zich aan het begin van de container.
flex-end Het element bevindt zich aan het einde van de container.
baseline Het element wordt geplaatst op de basijn van de container.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg: initial.
inherit Deze eigenschap wordt van de ouder-elementen geërfd. Raadpleeg: inherit.

Technische details

Standaardwaarde: auto
Inheriteren: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.alignSelf="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