`<content-distribution>` тип CSS

Перечисляемый тип значения <content-distribution> используется свойствами justify-content и align-content, а также сокращённым свойством place-content для распределения свободного пространства контейнера между его объектами выравнивания.

Синтаксис

<content-distribution> = space-between | space-around | space-evenly | stretch

Значения

Следующие ключевые значения представлены грамматическим термином <content-distribution>:

space-between

Равномерно распределяет объекты выравнивания внутри контейнера выравнивания. Первый элемент располагается вплотную к начальной границе контейнера выравнивания, последний элемент — вплотную к конечной границе контейнера выравнивания, а остальные элементы распределяются равномерно, так что расстояние между любыми двумя соседними элементами одинаково. Выравнивание по умолчанию для space-between — safe flex-start для flex-макета и start в остальных случаях. Если имеется только один элемент, он будет расположен вплотную к начальной границе.

space-around

Элементы равномерно распределяются в контейнере, оставляя по краям промежутки в половину размера. Расстояние между любыми двумя соседними элементами одинаково, а расстояния перед первым и после последнего элементов составляют половину от остальных промежутков. Выравнивание по умолчанию для space-around — safe center. Если в контейнере только один дочерний элемент, он будет расположен по центру.

space-evenly

Элементы равномерно распределяются в контейнере, оставляя по краям промежутки полного размера. Расстояния между любыми двумя соседними элементами, перед первым элементом и после последнего элемента одинаковы. Выравнивание по умолчанию для space-evenly — safe center. Если в контейнере только один дочерний элемент, он будет расположен по центру.

stretch

Если суммарный размер элементов меньше размера контейнера, размер всех элементов, которые могут увеличиваться, будет увеличен одинаково (не пропорционально), с учётом ограничений, заданных свойствами max-height, max-width или аналогичными средствами, чтобы суммарный размер элементов точно заполнил контейнер. Выравнивание по умолчанию для stretch — flex-start во flexbox и start в других режимах макета. Если имеется только один элемент и он может увеличиваться, он увеличится, чтобы заполнить контейнер.

Спецификации

См. также

• Свойства, использующие этот тип данных: align-content, justify-content, place-content
• Другие типы данных для выравнивания блоков: <baseline-position>, <content-position>, <overflow-position> и <self-position>
• Модуль выравнивания блоков CSS
• Модуль гибкой блочной раскладки CSS
• Модуль раскладки CSS Grid