English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство align-self определяет способ выравнивания элементов в контейнере flex.
В таблице ниже резюмируются контекст использования и история версий этого свойства.
| Значение по умолчанию: | auto |
|---|---|
| Применяется к: | Эластичные элементы, включая流入шие псевдоэлементы |
| Наследование: | Нет |
| Анимация: | Нет.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | object.style.alignItems="center" |
Грамматика этого свойства такая:
align-self: auto | baseline | center | flex-start | flex-end | stretch | initial | inherit
Ниже приведен пример того, как использовать свойство align-self.
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
.aligned {
/* Safari */
-webkit-flex: 1;
-webkit-align-self: stretch;
flex: 1;
align-self: stretch;
}Проверьте, чтобы увидеть‹/›В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| auto | Элемент использует вычисленные значения свойств родителя, если у него нет родителя, то используется stretch. Это значение по умолчанию. |
| baseline | Элемент находится на базовой линии flex-контейнера. |
| center | Элемент находится в центре расширяемого контейнера. |
| flex-start | Элемент находится в начале flex-контейнера. |
| flex-end | Этот элемент находится в конце расширяемого контейнера. |
| stretch | Растяните этот элемент, чтобы он соответствовал flex-контейнеру. |
| initial | Установите это свойство в его значение по умолчанию. |
| inherit | Если указано, то связанные элементы используют вычисленные значения свойств родителя align-self. |
Совместимость браузеров для свойства align-self, все основные браузеры поддерживают это свойство.
|
Внимание: Apple Safari 7 и выше поддерживают атрибут align-self, но требуется префикс -webkit-, например, -webkit-align-self: center;
Узнайте подробнее из следующих учебников:CSS выравнивание.
Соответствующие свойства:align-content,align-items,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.