justify-content
Распределяет элементы вдоль главной оси flex- или grid-контейнера.
Синтаксис
justify-content: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| flex-start | keyword | В начале (по умолчанию). |
| center | keyword | По центру. |
| flex-end | keyword | В конце. |
| space-between | keyword | Первый и последний у краёв, остальные равномерно между ними. |
| space-around | space-evenly | keyword | Равные промежутки вокруг элементов, включая края. |
Примеры
По центру, вразброс и в конце:
<style>
.row { display: flex; padding: 6px; margin-bottom: 6px; background: whitesmoke; }
.row div { padding: 6px 12px; background: lightskyblue; }
</style>
<div class="row" style="justify-content: center;"><div>A</div><div>B</div></div>
<div class="row" style="justify-content: space-between;"><div>A</div><div>B</div><div>C</div></div>
<div class="row" style="justify-content: flex-end;"><div>A</div><div>B</div></div>Примечания
justify-content работает, только когда есть свободное место; если элементы заполнили всю ширину, он ничего не меняет. space-between — классический способ поставить логотип слева, а меню справа.
См. также
- align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
- gap — Промежутки между элементами во flexbox и grid.
- align-content — Распределяет строки многострочного flex-контейнера или ряды сетки вдоль поперечной оси.
Вопросы и ответы по теме
В учебнике
- Flexbox — Раскладка элементов в ряд или колонку с помощью flexbox — оси, направление, промежутки, выравнивание и перенос.