justify-content
Поддержка браузерами
| 11.0+ | 28.0+ | 29.0+ | 17.0+ | 9.0+ |
Описание
CSS свойство justify-content указывает, каким образом будут выравниваться flex-элементы по горизонтали, внутри flex-контейнера.
Примечание: для выравнивания flex-элементов по вертикали используйте свойство align-items.
| Значение по умолчанию: | flex-start |
|---|---|
| Применяется: | к flex-контейнерам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.justifyContent="space-between"; |
Синтаксис
justify-content: flex-start|flex-end|center|space-between|space-around;
Значения свойства
| Значение | Описание |
|---|---|
| flex-start | Значение по умолчанию. flex-элементы располагаются друг за другом слева направо, прилегая к левой границе flex-контейнера. |
| flex-end | flex-элементы располагаются друг за другом слева направо, прилегая к правой границе flex-контейнера. |
| center | flex-элементы располагаются друг за другом точно по центру flex-контейнера, то есть слева и справа от элементов расстояние до границ контейнера будет одинаковым.
Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, то элементы сместятся так, чтобы переполнение было одинаковым с обоих сторон контейнера. |
| space-between | flex-элементы равномерно распределяются по горизонтали так, чтобы между каждой парой соседних элементов расстояние было одинаковым. Первый элемент прилегает своей левой границей к левой границе контейнера, а последний элемент прилегает своей правой границей к правой границе контейнера.
Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, или flex-элемент всего один, то данное значение будет соответствовать значению flex-start. |
| space-around | flex-элементы равномерно распределяются по горизонтали так, чтобы между каждой парой соседних элементов расстояние было одинаковым. Пустое пространство перед первым и после последнего элемента равно половине расстояния между каждой парой соседних элементов.
Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, или flex-элемент всего один, то данное значение будет соответствовать значению center. |
Пример
display: flex;
justify-content: flex-start;
}