justify-content

Свойство для выравнивания элементов по основной оси в гридах и флексах.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

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

Пример

Скопировано

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

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

        
        
          
        
      

Как понять

Скопировано

Это свойство определяет, как распределяется свободное пространство между элементами вдоль главной оси (для флексбоксов), и по горизонтали (для гридов).

Как пишется

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

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

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

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 79, поддерживается
  • Firefox 81, поддерживается
  • Safari 9, поддерживается
О Baseline

На практике

Скопировано

Алёна Батицкая советует

Скопировано

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