justify-content

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

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

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

        
          
          .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.

На практике

Скопировать ссылку "На практике" Скопировано

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

Скопировать ссылку "Алёна Батицкая советует" Скопировано

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