Ši align-selfnuosavybė yra „Flexible Box Layout“ modulio sub-ypatybė.
Tai leidžia nepaisyti align-itemskonkrečių lanksčių elementų vertės.
align-selfNuosavybė priima tuos pačius 5 vertybes kaip align-items:
flex-start: kryžminio starto krašto kraštas dedamas ant kryžminio starto linijosflex-end: elemento skersinis krašto kraštas dedamas ant skersinės linijoscenter: elementas yra centruotas skersinėje ašyjebaseline: elementai yra sulygiuoti, pavyzdžiui, jų pagrindinė linijastretch(numatytasis nustatymas): ištempkite, kad užpildytumėte konteinerį (vis tiek laikykitės min. / maks. pločio)
Sintaksė
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demonstracija
Šis demonstracinis elementas parodo, kaip elementas gali sulygiuoti „flex“ talpykloje, atsižvelgiant į align-selfvertę:
- 1-as punktas nustatytas į
flex-start - Antrasis punktas nustatytas į
flex-end - 3 elementas nustatytas į
center - Ketvirtasis punktas nustatytas į
baseline - 5-asis punktas nustatytas į
stretch
Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen align-self“ demonstracinę versiją „CodePen“.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0–7,1 * |
Norėdami gauti daugiau informacijos apie tai, kaip maišyti sintakses, kad gautumėte geriausią naršyklės palaikymą, žr. Šį straipsnį (CSS-Tricks) arba šį straipsnį (DevOpera).