Táto align-selfvlastnosť je podvlastnosťou modulu Flexibilné usporiadanie schránky.
Umožňuje prepísať align-itemshodnotu pre konkrétne položky flex.
Toto align-selfubytovacie zariadenie akceptuje rovnakých 5 hodnôt ako align-items:
flex-start: okraj začiatočného okraja položky je umiestnený na čiare krížového začiatkuflex-end: hrana okraja kríža položky je umiestnená na čiare krížacenter: položka je vycentrovaná v priečnej osibaseline: položky sú zarovnané, napríklad je vyrovnaná ich základná čiarastretch(predvolené): natiahnutím naplníte kontajner (stále rešpektujte minimálnu a maximálnu šírku)
Syntax
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Ukážka
Nasledujúca ukážka ukazuje, ako sa môže položka zarovnať vo flex kontajneri v závislosti od align-selfhodnoty:
- 1. položka je nastavená na
flex-start - 2. položka je nastavená na
flex-end - Tretia položka je nastavená na
center - Štvrtá položka je nastavená na
baseline - Piata položka je nastavená na
stretch
Prezrite si ukážku Pen align-self od CSS-Tricks (@ css-tricks) na CodePen.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Viac informácií o tom, ako kombinovať syntaxe s cieľom získať najlepšiu podporu prehľadávača, nájdete v tomto článku (CSS-triky) alebo v tomto článku (DevOpera).