place-content

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.

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