place-content

Одной строчкой выравниваем элементы в flex и grid 😎

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

Кратко

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

place-content — это свойство-шорткат для align-content и justify-content. С его помощью можно выровнять элементы во флекс- или грид-контейнерах.

Пример

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

Одной строчкой центруем синие элементы во флекс-контейнере и розовые в грид-контейнере:

        
          
          .container {  place-content: center;}
          .container {
  place-content: center;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

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

Удобство place-content в краткости записи и универсальности: при его использовании не нужно выравнивать элементы отдельными свойствами для разных осей.

Не любой флекс-контейнер подружится с place-content, для этого он обязательно должен быть многострочным! С этим поможет свойство flex-wrap в значении wrap или wrap-reverse.

Как пишется

Секция статьи "Как пишется"

На первом месте определяемся со значением align-content, затем justify-content:

        
          
          div {  place-content: space-around end;}
          div {
  place-content: space-around end;
}

        
        
          
        
      

Но можно указать одно значение, тогда оно применится сразу к обеим осям:

        
          
          div {  place-content: end;}
          div {
  place-content: end;
}

        
        
          
        
      

Для place-content можно выбрать следующие значения:

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

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

Открыть демо в новой вкладке