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