align-content: распределение строк внутри контейнера
Align-content управляет размещением содержимого вдоль соответствующей оси выравнивания. В многострочном Flexbox это особенно заметно при распределении нескольких строк внутри высокого контейнера.
Назначение
Align-content управляет размещением содержимого вдоль соответствующей оси выравнивания. В многострочном Flexbox это особенно заметно при распределении нескольких строк внутри высокого контейнера.
Как это работает
У flex-контейнера включите перенос и оставьте свободное место по поперечной оси. Space-between распределит его между строками. Align-items решает другую задачу: положение отдельных элементов внутри каждой строки.
Пример
<style>.lines-demo{display:flex;flex-wrap:wrap;align-content:space-between;gap:.5rem;width:15rem;max-width:100%;height:15rem;background:#edf3ef}.lines-demo>span{box-sizing:border-box;flex:0 0 45%;padding:1rem;background:#bdddc9}</style>
<div class="lines-demo"><span>Один</span><span>Два</span><span>Три</span><span>Четыре</span></div>Что должно получиться
Две строки располагаются у противоположных краёв контейнера. Фиксированная высота здесь нужна для демонстрации свободного пространства, а не служит готовым решением для любых текстов.
Граница применения и частая ошибка
В однострочном flex-контейнере это свойство не даст ожидаемого распределения строк. В Grid и обычной блочной раскладке применимость и детали отличаются. Не переносите вывод из одного режима раскладки на все остальные.
Самостоятельная проверка
Сравните space-between, center и flex-start, затем отключите wrap. Увеличьте содержимое блоков и проверьте переполнение. Для рабочего интерфейса замените демонстрационную высоту подходящим ограничением.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.