De align-selfeigenschap is een subeigenschap van de module Flexible Box Layout.
Het maakt het mogelijk om de align-itemswaarde voor specifieke flexitems te overschrijven .
De align-selfeigenschap accepteert dezelfde 5 waarden als align-items:
flex-start: cross-start marge rand van het item wordt op de cross-start lijn geplaatstflex-end: cross-end marge rand van het item wordt op de cross-end lijn geplaatstcenter: item is gecentreerd in de dwarsasbaseline: items worden uitgelijnd zoals hun basislijn is uitgelijndstretch(standaard): uitrekken om de container te vullen (respecteer nog steeds min-breedte / max-breedte)
Syntaxis
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demo
De volgende demo laat zien hoe een item zichzelf kan uitlijnen in de flexcontainer, afhankelijk van de align-selfwaarde:
- Het eerste item is ingesteld op
flex-start - Het 2e item is ingesteld op
flex-end - Het 3e item is ingesteld op
center - Het 4e item is ingesteld op
baseline - Het 5e item is ingesteld op
stretch
Zie de Pen align-self demo door CSS-Tricks (@ css-tricks) op CodePen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Raadpleeg dit artikel (CSS-Tricks) of dit artikel (DevOpera) voor meer informatie over het mixen van syntaxis om de beste browserondersteuning te krijgen.