Свойство justify-content: свободное место
Как распределять свободное пространство и отличать его от фиксированного gap.
Как это работает
justify-content распределяет свободное место по главной оси Flexbox. При направлении row это обычно горизонталь; при column — вертикаль. Если элементы уже заняли всё пространство через flex-grow, распределять может быть нечего.
space-between прижимает крайние элементы к границам, а оставшееся место размещает между ними. center собирает группу по центру. Для стабильного минимального расстояния добавляйте gap: он решает другую задачу и может сочетаться с распределением пространства.
Пример в интерфейсе
.bar { display: flex; justify-content: space-between; gap: 12px; padding: 18px; background: #eaf4ee; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| center | Группа по центру. |
| space-between | Свободное место между элементами. |
| space-around | Место вокруг каждого элемента. |
| space-evenly | Равные интервалы, включая края. |
На что обратить внимание
Не используйте space-between как единственное средство расстояний для меню, которое может переполниться. Нужны gap, перенос или другая адаптивная раскладка.
Проверьте на практике
Удалите один из трёх пунктов и сравните space-between с center. Проверьте, какой вариант сохраняет желаемую композицию.
Связанные темы: align-items, gap.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.