В align-self
имота е под-собственост на модула гъвкави полета Разпределение на.
Това дава възможност да се замени align-items
стойността за конкретни гъвкави елементи.
В align-self
имота приема същите 5 ценности са по align-items
:
flex-start
: ръбът на полето за кръстосано стартиране се поставя на линията за кръстосан стартflex-end
: крайният край на полето на артикула се поставя на кръстосаната линияcenter
: елементът е центриран в напречната осbaseline
: елементите са подравнени така, както са подравнени техните базови линииstretch
(по подразбиране): разтегнете, за да запълните контейнера (все още спазвайте min-width / max-width)
Синтаксис
align-self: auto | flex-start | flex-end | center | baseline | stretch .flex-item ( align-self: flex-end; )
Демонстрация
Следващата демонстрация показва как даден елемент може да се подреди в гъвкавия контейнер в зависимост от align-self
стойността:
- Първият елемент е настроен на
flex-start
- Вторият елемент е настроен на
flex-end
- Третият елемент е настроен на
center
- Четвъртият елемент е настроен на
baseline
- Петият елемент е настроен на
stretch
Вижте демонстрацията на Pen-align-self от CSS-Tricks (@ css-tricks) на CodePen.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
Chrome | Firefox | IE | Ръб, край | Сафари |
---|---|---|---|---|
21 * | 28 | 11. | 12 | 6,1 * |
Мобилен / таблет
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 4.4 | 7,0-7,1 * |
За повече информация как да смесвате синтаксиси, за да получите най-добрата поддръжка на браузъра, моля, вижте тази статия (CSS-трикове) или тази статия (DevOpera).