align-self — это свойство CSS, которое применяется к элементам, которые расположены внутри flex-контейнера, и устанавливает выравнивание элемента вдоль его перпендикулярной оси (вдоль главной оси для flex-direction: row и вдоль побочной оси для flex-direction: column).
Синтаксис для применения свойства align-self:
selector {
align-self: <value>;
}Значения, которые можно использовать в свойстве align-self, включают:
auto: Элемент определяет свое выравнивание в соответствии с родительским элементом flex-контейнера.flex-start: Элемент выравнивается по началу главной (или побочной) оси.flex-end: Элемент выравнивается по концу главной (или побочной) оси.center: Элемент выравнивается по центру главной (или побочной) оси.baseline: Элемент выравнивается по базовой линии (например, текста) главной (или побочной) оси.stretch: Элемент растягивается на весь свободный пространство по перпендикулярной оси.
Например, следующий код применяет свойство align-self к элементу, установленному с классом .item, чтобы перенести его выравнивание к центру побочной оси:
.item {
align-self: center;
}Это может использоваться для управления расположением элементов внутри flex-контейнера, когда требуется вести управление выравниванием для каждого элемента отдельно.
