Подравняване на себе си - CSS-трикове

Anonim

В 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).