justify-content

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

Кратко

Секция статьи "Кратко"

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

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

Пример

Секция статьи "Пример"

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

        
          
          .container {  display: flex;  justify-content: space-between;}
          .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.

Подсказки

Секция статьи "Подсказки"

Хотя большинство значений поддерживаются основными браузерами, с некоторыми из них могут быть трудности. Поэтому лучше на всякий случай проверяйте поддержку на Can I use.

На практике

Секция статьи "На практике"

Алёна Батицкая

Секция статьи "Алёна Батицкая"

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