Как работает свойство justify-content в CSS для выравнивания элементов в flex контейнере?

Свойство justify-content в CSS выравнивает элементы внутри flex-контейнера вдоль основной оси. webdesign.tutsplus.com Оно распределяет оставшееся пространство после того, как браузер вычислил необходимое пространство для всех элементов в контейнере flex. webdesign.tutsplus.com

Некоторые значения свойства justify-content и их описание:

• flex-start (значение по умолчанию) — первый элемент выравнивается по левому краю контейнера (при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее. metanit.com
• flex-end — последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее. metanit.com
• center — элементы выравниваются по центру. metanit.com
• space-between — первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). metanit.com Всё оставшееся пространство между ними равным образом распределяется между остальными элементами. metanit.com
• space-around — если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center. metanit.com В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами. metanit.com
• space-evenly — элементы равномерно размещены вдоль оси. htmlacademy.ru Отступы между соседними элементами и краями флекс-контейнера равны. htmlacademy.ru

Важно: свойство justify-content может выполнять действия только при наличии свободного места для распространения. habr.com Если набор flex-элементов занимает всё пространство на главной оси, использование justify-content ничего не изменит. habr.com

Пользователь

Время добавления