Релевантные источники: - developer.mozilla.org -> [align-self](https://developer.mozilla.org/ru/docs/Web/CSS/align-self) > Данное свойство прописывается [[flex container и flex items|flex-элементу]] `align-self` - это то же самое, что и свойство [[align-items в контексте flexbox|align-items]], но только свойство применяется для одного конкретного [[flex container и flex items|flex-элемента]], а не на все flex-элементы [[flex container и flex items|flex-контейнера]]. ### Значения свойства - `auto`: (значение по умолчанию) Наследует значение от [[align-items в контексте flexbox|align-items]] родительского flex-контейнера. - `flex-start`: Элемент выравнивается по началу поперечной оси. - `flex-end`: Элемент выравнивается по концу поперечной оси. - `center`: Элемент выравнивается по центру поперечной оси. - `baseline`: Элемент выравнивается по базовой линии текста. - `stretch`: Элемент растягивается, чтобы заполнить пространство вдоль поперечной оси, если не установлена фиксированная высота (или ширина, если flex-контейнер расположен горизонтально). ### Синтаксис ```css .child { align-self: flex-end; } ``` ### Интерактивная визуализация Сгенерировано ChatGPT-4o, поправлено мной. <iframe src="https://bekhanfiles.link//A1/B1/C1/CSS/Flexbox/Interactive/align-self/index.html" width="100%" height="450px"></iframe>