Релевантные источники: - developer.mozilla.org -> [align-items](https://developer.mozilla.org/ru/docs/Web/CSS/align-items) - css-tricks.com -> [align-items](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-items) > Данное свойство прописывается [[flex container и flex items|flex-контейнеру]] `align-items` — это CSS-свойство, которое используется в контейнере flexbox для настройки выравнивания flex-элементов вдоль поперечной оси (перпендикулярной главной оси родительского контейнера). Главное ось определяется свойством [[flex-direction]]. ### Значения свойства 1. **stretch**: (по умолчанию) Flex-элементы растягиваются, чтобы заполнить контейнер по высоте. 2. **flex-start**: Flex-элементы выравниваются по началу контейнера. 3. **flex-end**: Flex-элементы выравниваются по концу контейнера. 4. **center**: Flex-элементы выравниваются по центру контейнера. 5. **baseline**: Flex-элементы выравниваются по их базовой линии текста. ### Синтаксис ```css .parent { align-items: flex-start; } ``` ### Интерактивная визуализация Сгенерировано ChatGPT-4o, поправлено мной. <iframe src="https://bekhanfiles.link//A1/B1/C1/CSS/Flexbox/Interactive/align-items/index.html" width="100%" height="330px"></iframe> ### Визуализация картинкой ![[align-items.svg|300]]