Как распределить элементы равномерно
Короткий ответ
justify-content: space-between ставит крайние элементы к краям, а остальное место делит поровну:
<div style="display: flex; justify-content: space-between; padding: 8px; background: whitesmoke;">
<span>Home</span><span>Blog</span><span>Shop</span><span>Contact</span>
</div>Три способа распределить место
Сравните значения: space-around даёт половину промежутка по краям, space-evenly — одинаковые промежутки везде:
<style>
.r { display: flex; margin-bottom: 6px; background: whitesmoke; }
.r b { padding: 4px 10px; background: gold; }
</style>
<div class="r" style="justify-content: space-between;"><b>A</b><b>B</b><b>C</b></div>
<div class="r" style="justify-content: space-around;"><b>A</b><b>B</b><b>C</b></div>
<div class="r" style="justify-content: space-evenly;"><b>A</b><b>B</b><b>C</b></div>Фиксированный промежуток
Если элементы должны стоять рядом с одинаковым зазором, а не растягиваться на всю ширину, нужен gap:
<div style="display: flex; gap: 16px;">
<button>Save</button><button>Cancel</button><button>Help</button>
</div>Частая ошибка
Промежутки через margin-right у каждого элемента оставляют лишний отступ после последнего, и его приходится убирать :last-child. gap ставит зазор только между элементами — отдельных правил не нужно.
Функции из этого ответа
- justify-content — Распределяет элементы вдоль главной оси flex- или grid-контейнера.
- gap — Промежутки между элементами во flexbox и grid.
- flex — Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.