Izlīdzināt-sevi - CSS-triki

Satura rādītājs

align-selfĪpašums ir sub-īpašums Elastīga Box Izkārtojums moduli.

Tas ļauj ignorēt align-itemsnoteiktu elastīgo elementu vērtību.

align-selfĪpašums pieņem tos pašus 5 vērtības kā align-items:

  • flex-start: vienuma krusta sākuma malas mala ir novietota uz krusta sākuma līnijas
  • flex-end: vienuma šķērsgriezuma maliņa ir novietota uz šķērsgriezuma līnijas
  • center: vienums ir centrēts šķērsass
  • baseline: vienumi ir izlīdzināti, piemēram, ir izlīdzināti to pamatlīnija
  • stretch (noklusējums): izstiepiet, lai aizpildītu konteineru (joprojām ievērojiet min-width / max-width)

Sintakse

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

Demonstrācija

Šajā demonstrācijā parādīts, kā vienums var izlīdzināties elastīgajā konteinerā atkarībā no align-selfvērtības:

  • 1. vienums ir iestatīts uz flex-start
  • 2. vienums ir iestatīts uz flex-end
  • Trešais vienums ir iestatīts uz center
  • Ceturtais vienums ir iestatīts uz baseline
  • 5. vienums ir iestatīts uz stretch

Skatiet CSS-Tricks (@ css-tricks) Pen align-self demonstrāciju vietnē CodePen.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

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

Mobilais / planšetdators

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

Lai iegūtu papildinformāciju par sintakses sajaukšanu, lai iegūtu vislabāko pārlūka atbalstu, lūdzu, skatiet šo rakstu (CSS-Tricks) vai šo rakstu (DevOpera).

Interesanti raksti...