align-self
Īpašums ir sub-īpašums Elastīga Box Izkārtojums moduli.
Tas ļauj ignorēt align-items
noteiktu 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īnijasflex-end
: vienuma šķērsgriezuma maliņa ir novietota uz šķērsgriezuma līnijascenter
: vienums ir centrēts šķērsassbaseline
: vienumi ir izlīdzināti, piemēram, ir izlīdzināti to pamatlīnijastretch
(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-self
vē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).