Свойство CSS align-content

Свойство CSS align-content управляет тем, как flex-контейнер распределяет дополнительное пространство между строками и вокруг них вдоль поперечной оси. На этой странице объясняется, когда свойство вступает в силу, рассматривается каждое значение с запускаемым примером, а также показано его отличие от связанных свойств выравнивания.

Во flex-контейнере с направлением строк главная ось проходит горизонтально, поэтому поперечная ось — вертикальная. Таким образом, align-content перемещает целые строки элементов вверх, вниз или распределяет их по вертикали — оно никогда не воздействует на отдельные элементы.

Когда align-content вступает в силу?

Должны выполняться оба условия, иначе свойство не даёт эффекта:

Контейнер должен допускать перенос строк — задайте flex-wrap: wrap (или используйте сокращение flex-flow). Значение по умолчанию nowrap держит все элементы на одной строке.
Должно быть больше одной строки и свободное пространство на поперечной оси, в которое строки могут смещаться.

Если нужно выровнять элементы внутри одной строки, используйте вместо этого align-items. align-content работает со строками как с группой, а align-items — с элементами внутри каждой строки. Свойство align-content входит в число свойств CSS3.

Значение stretch является значением по умолчанию для этого свойства.

Свойство align-content принимает следующие значения:

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch

Начальное значение	stretch
Применяется к	Многострочным flex-контейнерам.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS3
DOM-синтаксис	object.style.alignContent = "flex-end";

Синтаксис

Синтаксис свойства CSS align-content

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;

Пример свойства align-content со значением stretch:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: stretch;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства align-content со значением "center":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: center;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Попробуйте сами »

Пример свойства align-content со значением "flex-start":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Попробуйте сами »

Пример свойства align-content со значением "flex-end":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-end;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Попробуйте сами »

В следующем примере пространство равномерно распределяется между flex-строками.

Пример свойства align-content со значением "space-between":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-between; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Попробуйте сами »

Результат

Ещё один пример со значением "space-around". Между flex-строками устанавливается одинаковое расстояние.

Пример свойства align-content со значением "space-around":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: space-around;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-around; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

Попробуйте сами »

При использовании space-evenly отступы перед первой строкой, между каждой строкой и после последней строки одинаковы — в отличие от space-around, где внешние отступы вдвое меньше внутренних.

Пример свойства align-content со значением "space-evenly":

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
        align-content: space-evenly;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-evenly; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

align-content и align-items и justify-content

Эти три свойства легко спутать, поскольку все они выравнивают дочерние элементы flex-контейнера:

align-content — выравнивает строки как группу по поперечной оси. Требует переноса строк и наличия нескольких строк.
align-items — выравнивает элементы внутри одной строки по поперечной оси. Работает даже с одной строкой.
justify-content — выравнивает элементы вдоль главной оси (направления потока элементов).

Подробнее о том, как эти свойства взаимодействуют, читайте в исчерпывающем руководстве по Flexbox.

Поддержка браузеров

align-content поддерживается всеми современными браузерами — Chrome, Firefox, Safari, Edge и Opera. Оно является частью стабильной спецификации Flexbox, поэтому вендорные префиксы для актуальных версий браузеров не требуются.

Значения

Значение	Описание	Попробуйте
stretch	Элементы растягиваются, заполняя контейнер. Это значение по умолчанию для данного свойства.	Попробуйте »
center	Элементы размещаются по центру контейнера.	Попробуйте »
flex-start	Элементы размещаются в начале контейнера.	Попробуйте »
flex-end	Элементы размещаются в конце контейнера.	Попробуйте »
space-between	Равномерно распределяет пространство между flex-строками.	Попробуйте »
space-around	Элементы распределяются с одинаковым пространством между ними.	Попробуйте »
space-evenly	Распределяет элементы с одинаковыми промежутками между ними, а также перед первым и после последнего элемента.	Попробуйте »
initial	Устанавливает значение свойства по умолчанию.	Попробуйте »
inherit	Наследует значение свойства от родительского элемента.

Практика

Какие возможные значения у свойства CSS align-content?