Tasaa itseäni CSS-temppuja

align-selfOminaisuus on osa-ominaisuus Flexible Box Asettelu moduuli.

Sen avulla voidaan ohittaa align-itemstiettyjen joustavien kohteiden arvo.

align-selfOminaisuuden hyväksyy samat 5 arvot kuin align-items:

flex-start: kohteen aloitusmarginaalin reuna asetetaan aloitusviivalle
flex-end: kohteen poikkileikkausreuna sijoitetaan poikkiviivalle
center: kohde on keskitetty poikkiakseliin
baseline: Kohteet on tasattu, kuten niiden perusviiva
stretch (oletus): venytä säiliön täyttämiseksi (noudata silti min-leveyttä / maksimileveyttä)

Syntaksi

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

Demo

Seuraava esittely näyttää, kuinka kohde voi kohdistaa itsensä joustosäiliöön align-selfarvosta riippuen :

Ensimmäinen kohde on flex-start
2. kohta on asetettu flex-end
Kolmas kohta on asetettu center
Neljäs kohta on asetettu baseline
Viides kohta on asetettu stretch

Katso CSS-Tricks (@ css-tricks) Pen align-self -demo CodePenistä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.