CSS-свойство align-self
Свойство align-self
определяет выравнивание по умолчанию для конкретного элемента во flex-контейнере.
Значение по умолчанию: | auto |
Применяется к: | Flex-элементам, в том числе в потоке псевдо-элементов |
Наследование: | Нет |
Анимирование: | Нет. Анимируемые свойства |
Версия: | Новый в CSS3 |
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
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;
/* Standard syntax */ display: flex;
align-items: flex-start;
}
.aligned {
/* Safari */ -webkit-flex: 1;
-webkit-align-self: stretch;
/* Standard syntax */ flex: 1;
align-self: stretch;
}
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение | Описание |
---|---|
auto | Элемент принимает вычисленное значение свойства родительского элемента align-items или растягивается, если у него нет родителя. Это значение установлено по умолчанию. |
baseline | Элемент расположен на базовой линии flex-контейнера. |
center | Элемент расположен в центре flex-контейнера. |
flex-start | Элемент расположен в начале flex-контейнера. |
flex-end | Элемент расположен в конце flex-контейнера. |
stretch | Элемент растягивается, чтобы соответствовать flex-контейнеру. |
initial | Устанавливает это свойство в значение по умолчанию. |
inherit | Если указан, связанный элемент принимает вычисленное значение своего родительского элемента align-self . |
Поддержка браузеров
Свойства align-self
поддерживается во всех основных браузерах.
Apple Safari версии 7 и выше поддерживает свойство align-self
, но требует префикс -webkit-
, например -webkit-align-self: center;