align-selfProprietatea este o sub-proprietate a modulului flexibil Box Layout.
Face posibilă înlocuirea align-itemsvalorii pentru anumite elemente flex.
align-selfProprietatea acceptă aceleași valori ca și 5 align-items:
flex-start: marginea marginii de pornire transversală a elementului este plasată pe linia de pornire transversalăflex-end: marginea marginii transversale a elementului este plasată pe linia transversalăcenter: elementul este centrat în axa transversalăbaseline: elementele sunt aliniate, cum ar fi linia de bază a acestorastretch(implicit): întindeți pentru a umple recipientul (respectați totuși lățimea min / lățimea maximă)
Sintaxă
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Demo
Următoarea demonstrație arată cum un articol se poate alinia în containerul flex în funcție de align-selfvaloare:
- Primul element este setat la
flex-start - Al doilea element este setat la
flex-end - Al treilea element este setat la
center - Al patrulea element este setat la
baseline - Cel de-al 5-lea element este setat la
stretch
Vedeți demonstrația Pen align-self de CSS-Tricks (@ css-tricks) pe CodePen.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Pentru mai multe informații despre cum să amestecați sintaxele pentru a obține cea mai bună asistență pentru browser, vă rugăm să consultați acest articol (CSS-Tricks) sau acest articol (DevOpera).