Релевантные источники: - developer.mozilla.org -> [justify-content](https://developer.mozilla.org/ru/docs/Web/CSS/justify-content) - css-tricks.com -> [justify-content](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content) > Данное свойство прописывается [[flex container и flex items|flex-контейнеру]] `justify-content` — это свойство CSS, которое используется для распределения пространства между и вокруг [[flex container и flex items|flex-элементов]] вдоль главной оси контейнера. ### Значения свойства 1. **flex-start**: (значение по умолчанию) Элементы выравниваются по началу flex-контейнера. 2. **flex-end**: Элементы выравниваются по концу flex-контейнера. 3. **center**: Элементы центрируются вдоль главной оси. 4. **space-between**: Элементы распределяются с равными интервалами между ними; первый flex-элемент выравнивается по началу, а последний — по концу flex-контейнера. 5. **space-around**: Flex-элементы распределяются с равными интервалами вокруг них; половина интервала находится в начале и в конце flex-контейнера. 6. **space-evenly**: Flex-элементы распределяются с равными интервалами между ними, включая начало и конец flex-контейнера. ### Синтаксис ```css .parent { justify-content: flex-start; } ``` ### Визуализация картинкой ![[justify-content.svg|300]]