Den align-selfegenskab er en sub-egenskab af Flexible Box layout modul.
Det gør det muligt at tilsidesætte align-itemsværdien for specifikke flex-poster.
Den align-selfejendom accepterer de samme 5 værdier som align-items:
flex-start: krydsstartmarginkanten på varen placeres på krydsstartlinjenflex-end: Varens tværgående margenkant placeres på den tværgående linjecenter: elementet er centreret i tværaksenbaseline: elementer er justeret, f.eks. deres basislinje er justeretstretch(standard): stræk for at fylde beholderen (respekter stadig min. bredde / maks. bredde)
Syntaks
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demo
Den følgende demo viser, hvordan et element kan justere sig selv i flexcontaineren afhængigt af align-selfværdien:
- Det første element er indstillet til
flex-start - 2. punkt er indstillet til
flex-end - Det tredje element er indstillet til
center - Det fjerde punkt er indstillet til
baseline - Det 5. element er indstillet til
stretch
Se Pen align-self demo af CSS-Tricks (@ css-tricks) på CodePen.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
For mere information om, hvordan man blander syntakser for at få den bedste browsersupport, henvises til denne artikel (CSS-Tricks) eller denne artikel (DevOpera).