Как align-content влияет на расположение рядов во флекс-контейнере?

Свойство align-content влияет на расположение рядов во flex-контейнере, распределяя свободное пространство по поперечной оси. doka-guide.vercel.app

Некоторые значения свойства и их влияние на расположение рядов:

• stretch (значение по умолчанию) — ряды растягиваются одинаково, чтобы занять всё доступное пространство. doka-guide.vercel.app
• flex-start — все ряды располагаются у начала поперечной оси (для строк — это верхний край, для столбцов — левый край контейнера). metanit.com
• flex-end — все ряды располагаются у конца поперечной оси (строки — по нижнему краю, столбцы — по правому краю). metanit.com
• center — ряды выравниваются по центру контейнера. metanit.com
• space-between — первый ряд прижимается к началу поперечной оси, последний — к концу поперечной оси, а остальные располагаются так, чтобы свободное пространство было поделено на отступы между ними равномерно. doka-guide.vercel.app
• space-around — отступы у каждого ряда равнозначны отступам у любого другого ряда. doka-guide.vercel.app

Важно учитывать, что align-content работает только в случае, если flex-контейнер содержит несколько строк flex-элементов. css-live.ru Если элементы размещены в единственной строке, то это свойство не влияет на раскладку. css-live.ru