Tato align-selfvlastnost je dílčí vlastností modulu Flexibilní rozvržení krabice.
Umožňuje přepsat align-itemshodnotu pro konkrétní položky flexu.
Ubytovací zařízení align-selfpřijímá stejných 5 hodnot jako align-items:
flex-start: okraj okraje položky s křížovým začátkem je umístěn na čáře křížového začátkuflex-end: okraj okraje příčného prvku položky je umístěn na čáře příčného koncecenter: položka je vycentrována v příčné osebaseline: položky jsou zarovnány, například je vyrovnána jejich účařístretch(výchozí): roztažení pro vyplnění kontejneru (stále respektujte min. šířku / max. šířku)
Syntax
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )Ukázka
Následující ukázka ukazuje, jak se položka může zarovnat v kontejneru flex v závislosti na align-selfhodnotě:
- 1. položka je nastavena na
flex-start - 2. položka je nastavena na
flex-end - Třetí položka je nastavena na
center - 4. položka je nastavena na
baseline - 5. položka je nastavena na
stretch
Podívejte se na ukázku Pen align-self od CSS-Tricks (@ css-tricks) na CodePen.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Další informace o tom, jak kombinovat syntaxe s cílem získat nejlepší podporu prohlížeče, najdete v tomto článku (CSS-Tricks) nebo v tomto článku (DevOpera).