Den align-selfegenskapen er en under egenskap av Flexible Box Layout modul.
Det gjør det mulig å overstyre align-itemsverdien for spesifikke flex-artikler.
Den align-selfeiendommen aksepterer de samme 5 verdier som align-items:
flex-start: kryss-start margin kanten av varen er plassert på kryss-start linjenflex-end: grensekanten på varen er plassert på den tverrgående linjencenter: elementet er sentrert i tverraksenbaseline: elementene er justert slik at grunnlinjen er justertstretch(standard): strekk for å fylle beholderen (respekter fortsatt min-bredde / maks-bredde)
Syntaks
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demo
Følgende demo viser hvordan et element kan justere seg i flexbeholderen avhengig av align-selfverdien:
- Den første varen er satt til
flex-start - 2. element er satt til
flex-end - Det tredje elementet er satt til
center - Den fjerde varen er satt til
baseline - 5. element er satt til
stretch
Se Pen align-self demo av CSS-Tricks (@ css-tricks) på CodePen.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
For mer informasjon om hvordan du blander syntakser for å få best nettleserstøtte, se denne artikkelen (CSS-Tricks) eller denne artikkelen (DevOpera).