Вопрос проверяет понимание свойства CSS align-content, которое управляет распределением свободного пространства между строками внутри flex-контейнера по поперечной оси.
Свойство align-content — это ключевое свойство CSS Flexbox, которое применяется к flex-контейнеру. Оно определяет, как браузер распределяет доступное пространство по поперечной оси (cross axis) между несколькими рядами (или линиями) flex-элементов. Важно понимать, что это свойство работает только в многострочных flex-контейнерах, то есть когда у контейнера установлено flex-wrap: wrap (или wrap-reverse) и элементы переносятся на несколько строк.
Когда высота (или ширина, если поперечная ось горизонтальна) контейнера больше, чем суммарная высота всех строк элементов, образуется свободное пространство. Свойство align-content указывает, как это пространство должно быть распределено. Если строка только одна, это свойство не окажет никакого эффекта — для выравнивания одной строки используется свойство align-items.
stretch (значение по умолчанию): строки растягиваются, чтобы заполнить всё доступное пространство по поперечной оси.flex-start: строки группируются в начале поперечной оси контейнера. Свободное пространство остаётся в конце.flex-end: строки группируются в конце поперечной оси. Свободное пространство остаётся в начале.center: строки группируются по центру контейнера по поперечной оси.space-between: первая строка находится в начале, последняя — в конце, а оставшееся пространство равномерно распределяется между строками.space-around: пространство распределяется вокруг каждой строки, так что отступы между строками равны, а отступы от краёв контейнера составляют половину этого значения.space-evenly: пространство распределяется так, чтобы интервалы между любыми двумя строками, а также между строками и краями контейнера, были одинаковыми.Рассмотрим контейнер с фиксированной высотой, внутри которого несколько flex-элементов переносятся на две строки.
.container {
display: flex;
flex-wrap: wrap;
height: 300px; /* Высота создаёт свободное пространство */
align-content: space-between; /* Распределяем пространство между строками */
background-color: lightgray;
}
.item {
width: 100px;
height: 50px;
margin: 5px;
background-color: coral;
}В этом примере, если элементы не заполняют всю высоту контейнера, свойство align-content: space-between разместит первую строку элементов вверху, последнюю — внизу, а свободное пространство между ними будет разделено поровну.
align-content незаменим при создании адаптивных сеток и сложных раскладок, где количество элементов в строке может меняться в зависимости от ширины экрана. Например, в галерее изображений или в карточках товаров, которые переносятся на новую строку. Оно позволяет тонко контролировать вертикальное (или горизонтальное, если направление колонкой) выравнивание этих блоков, создавая визуально сбалансированные интерфейсы.
Итог: Используйте align-content, когда вам нужно управлять распределением пространства между несколькими рядами элементов внутри flex-контейнера, особенно при создании адаптивных многострочных макетов.