skip to main content

justify-content

css

Кратко 🔗

Свойство выравнивает флекс-элементы внутри флекс-контейнера по основной оси.

При расположении флекс-элементов в ряд свойство управляет выравниванием по горизонтали. При расположении в колонку — выравниванием по вертикали.

Пример 🔗

Код ниже заставит флекс-элементы распределиться на всю ширину родителя, разделив свободное пространство поровну.

.container {
display: flex;
justify-content: space-between;
}

Как это понять 🔗

У флексбоксов множество свойств. Такое множество приводит к необходимости местами сокращать код. Шорткаты как раз дают возможность указывать в одну строку сразу несколько значений для нескольких свойств.

Шорткат flex-flow объединил в себе свойств, связанные с потоком внутри флекс-контейнера.

Как пишется 🔗

Возможные значения: 🔗

  • flex-start (значение по умолчанию) — элементы прижимаются к краю, в котором начинается основная ось.
  • flex-end — элементы прижимаются к краю, в котором основная ось заканчивается.
  • start — элементы прижимаются к тому краю, откуда начинается чтение языка сайта.
  • end — элементы прижимаются к краю, противоположному началу направления чтения языка сайта.
  • left — элементы прижмутся к левому краю родителя.
  • right — элементы прижмутся к правому краю родителя.
  • center — элементы выстраиваются по центру родителя.
  • space-between — крайние элементы прижимаются к краям родителя, оставшиеся выстраиваются внутри контейнера равномерно так, чтобы между ними были одинаковые отступы.
  • space-around — свободное пространство будет поделено между элементами так, чтобы справа и слева каждый элемент имел одинаковые отступы.
  • space-evenly — свободное место будет распределено так, чтобы расстояние между любыми двумя элементами было одинаковым и расстояние от крайних элементов до края было таким же.

Если основная ось идёт горизонтально, то для сайта с направлением письма слева направо (LTR) значение start прижмёт элементы к левому краю, а значение end прижмёт элементы к правому краю. Для сайтов с направлением письма справа налево (RTL) элементы будут прижиматься к противоположным краям для аналогичных значений.

В случае, если указано свойство flex-direction: column, то значения left и right срабатывают как start.

Подсказки 🔗

💡 Значение space-between поддерживается не во всех версиях Edge.
💡 Значения start, left, right, end до сих пор не реализованы в Chrome.

Лучше периодически сверяться с 🔗 Can I use.

В работе 🔗

🛠 Если внутри флекс-контейнера всего два элемента, то удобно использовать justify-content: space-between чтобы прижать их к противоположным краям родителя. Что имитирует поведение свойства float, но без последствий.

Автор: Алёна,