Anpassa-jag - CSS-tricks | CSS Almanack 2025

Den align-selfegenskapen är en sub-egenskap hos den flexibla Box Layout modul.

Det gör det möjligt att åsidosätta align-itemsvärdet för specifika flexartiklar.

Den align-selfegenskapen accepterar samma 5 värden som align-items:

flex-start: artikeln för korsstartmarginal placeras på korsstartlinjen
flex-end: sidans marginalkant på artikeln placeras på tvärlinjen
center: objektet är centrerat i tväraxeln
baseline: objekt är inriktade, till exempel att deras baslinje är inriktade
stretch (standard): sträck för att fylla behållaren (respektera fortfarande minbredd / maxbredd)

Syntax

align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )

Demo

Följande demo visar hur ett objekt kan anpassa sig i flexbehållaren beroende på align-selfvärdet:

Den första posten är inställd på flex-start
Det andra objektet är inställt på flex-end
Det tredje objektet är inställt på center
Det fjärde objektet är inställt på baseline
Det femte objektet är inställt på stretch

Se Penjustera själv-demo av CSS-Tricks (@ css-tricks) på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.