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