Joonduma-ise - CSS-trikid

Lang L: none (table-of-contents)

align-selfVara on sub-vara Paindlik Box paigutus moodul.

See võimaldab tühistada align-itemskonkreetsete paindlike elementide väärtuse.

align-selfVara aktsepteerib sama 5 väärtused nagu align-items:

  • flex-start: üksuse riststardiserva serv asetatakse riststardijoonele
  • flex-end: üksuse põikiserva serv asetatakse ristjoonele
  • center: element on telje keskel
  • baseline: üksused on joondatud, nagu nende algjoon on joondatud
  • stretch (vaikimisi): venitage konteineri täitmiseks (järgige siiski min-width / max-width)

Süntaks

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

Demo

Järgmine demo näitab, kuidas üksus saab paindmahutis joonduda sõltuvalt align-selfväärtusest:

  • 1. üksus on seatud väärtusele flex-start
  • 2. üksus on seatud väärtusele flex-end
  • 3. üksus on seatud väärtusele center
  • 4. üksus on seatud väärtusele baseline
  • 5. üksus on seatud väärtusele stretch

Vaadake CodePenis lehe CSS-Tricks (@ css-tricks) pliiatsi joondamise iseendat.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
21 * 28 11 12 6,1 *

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 85 4.4 7,0–7,1 *

Lisateavet süntaksi segamise kohta, et saada parim brauseritugi, leiate sellest artiklist (CSS-trikid) või sellest artiklist (DevOpera).

Huvitavad Artiklid...