Lygiuotis sau - CSS-gudrybės

Turinys

Š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 linijos
  • flex-end: elemento skersinis krašto kraštas dedamas ant skersinės linijos
  • center: elementas yra centruotas skersinėje ašyje
  • baseline: elementai yra sulygiuoti, pavyzdžiui, jų pagrindinė linija
  • stretch (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).

Įdomios straipsniai...