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

CSS-свойство CSS align-content задаёт распределение пространства между элементами содержимого и вокруг них вдоль флексбокса по его поперечной оси либо вдоль блочной оси элемента сетки или блочного уровня.

Это свойство не действует на однострочные флекс-контейнеры (то есть контейнеры с flex-wrap: nowrap).

В интерактивном примере ниже для демонстрации некоторых значений этого свойства используется раскладка сетки.

Попробуйте

align-content: start;

align-content: center;

align-content: space-between;

align-content: space-around;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-auto-rows: 40px;
  column-gap: 10px;
  height: 180px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Синтаксис

/* Normal alignment */
align-content: normal;

/* Basic positional alignment */
/* align-content does not take left and right values */
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;

/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Distributed alignment */
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;

/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;

/* Global values */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;

Значения

Для этого свойства указывается одно или два из следующих ключевых слов:

normal

Элементы размещаются в позиции по умолчанию, как если бы значение align-content не было задано.

start

Элементы плотно прилегают друг к другу у начального края контейнера выравнивания по поперечной оси.

center

Элементы плотно прилегают друг к другу в центре контейнера выравнивания вдоль поперечной оси.

end

Элементы плотно прилегают друг к другу у конечного края контейнера выравнивания по поперечной оси.

flex-start

Элементы плотно прилегают друг к другу у края контейнера выравнивания, соответствующего стороне начала поперечной оси флекс-контейнера. Это значение применяется только к элементам флекс-раскладки. Для элементов, которые не являются дочерними элементами флекс-контейнера, это значение трактуется как start.

flex-end

Элементы плотно прилегают друг к другу у края контейнера выравнивания, соответствующего стороне конца поперечной оси флекс-контейнера. Это значение применяется только к элементам флекс-раскладки. Для элементов, которые не являются дочерними элементами флекс-контейнера, это значение трактуется как end.

baseline, first baseline, last baseline

Указывает на участие в выравнивании по первой или последней базовой линии: выравнивает базовую линию первой или последней группы базовых линий блока с соответствующей базовой линией в общей группе первых или последних базовых линий всех блоков в его группе с общим выравниванием по базовой линии.

Резервное выравнивание для first baseline — start, а для last baseline — end.

space-between

Элементы равномерно распределяются в контейнере выравнивания вдоль поперечной оси. Расстояние между каждой парой соседних элементов одинаково. Первый элемент прилегает к начальному краю контейнера выравнивания по поперечной оси, а последний — к конечному краю контейнера выравнивания по поперечной оси.

space-around

Элементы равномерно распределяются в контейнере выравнивания вдоль поперечной оси. Расстояние между каждой парой соседних элементов одинаково. Свободное пространство перед первым и после последнего элемента равно половине расстояния между каждой парой соседних элементов.

space-evenly

Элементы равномерно распределяются в контейнере выравнивания вдоль поперечной оси. Расстояния между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом одинаковы.

stretch

Если суммарный размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер элементов с размером auto увеличивается в равной степени (но не пропорционально), при этом учитываются ограничения, заданные свойствами max-height/max-width (или эквивалентными средствами), так что суммарный размер точно заполняет контейнер выравнивания по поперечной оси.

safe

Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово приводит к переполнению контейнера выравнивания и потере данных, элемент выравнивается так, как если бы режимом выравнивания было start.

unsafe

Используется вместе с ключевым словом выравнивания. Указанное значение выравнивания применяется независимо от относительных размеров элемента и контейнера выравнивания, а также от того, может ли возникнуть переполнение с потерей данных.

Формальное определение

Формальный синтаксис

align-content = 
  normal |
  <baseline-position> |
  <content-distribution> |
  <overflow-position>? <content-position>

<baseline-position> = 
  [ first | last ]? baseline

<content-distribution> = 
  space-between |
  space-around |
  space-evenly |
  stretch

<overflow-position> = 
  unsafe |
  safe

<content-position> = 
  center |
  start |
  end |
  flex-start |
  flex-end

Примеры

Действие различных значений align-content

В этом примере можно переключаться между тремя различными значениями свойства display, включая flex, grid и block. Также можно переключаться между различными значениями свойства align-content.

HTML

<section>
  <div class="olive">Olive</div>
  <div class="coral">Coral</div>
  <div class="deepskyblue">Deep<br />sky<br />blue</div>
  <div class="orchid">Orchid</div>
  <div class="slateblue">Slateblue</div>
  <div class="maroon">Maroon</div>
</section>

<fieldset class="controls">
  <legend>Controls</legend>
  <div class="row">
    <label for="display">display: </label>
    <select id="display">
      <option value="block" selected>block</option>
      <option value="flex">flex</option>
      <option value="grid">grid</option>
    </select>
  </div>
  <div class="row">
    <label for="alignContent">align-content: </label>
    <select id="alignContent">
      <option value="normal" selected>normal</option>
      <option value="start">start</option>
      <option value="center">center</option>
      <option value="end">end</option>
      <option value="flex-start">flex-start</option>
      <option value="flex-end">flex-end</option>
      <option value="space-between">space-between</option>
      <option value="space-around">space-around</option>
      <option value="space-evenly">space-evenly</option>
    </select>
  </div>
  <p>CSS applied</p>
  <pre>
section {
  display: <span id="displayStyle">block</span>;
  align-content: <span id="align">normal</span>
}
  </pre>
</fieldset>

CSS

body {
  font-size: 1.25rem;
  display: flex;
  gap: 1rem;
}
section div {
  font-family: monospace;
  padding: 3px;
}

section {
  border: solid 1.5px tomato;
  height: 300px;
  width: 300px;
  flex-wrap: wrap; /* used by flex only */
  gap: 0.2rem; /* not used by block */
}
.olive {
  background-color: olive;
}
.coral {
  background-color: coral;
}
.deepskyblue {
  background-color: deepskyblue;
}
.orchid {
  background-color: orchid;
}
.slateblue {
  background-color: slateblue;
  color: white;
}
.maroon {
  background-color: maroon;
  color: white;
}

const alignContent = document.querySelector("#alignContent");
const display = document.querySelector("#display");
const container = document.querySelector("section");
const displayStyle = document.querySelector("#displayStyle");
const alignStyle = document.querySelector("#align");

alignContent.addEventListener("change", () => {
  updatePage();
});
display.addEventListener("change", () => {
  updatePage();
});
function updatePage() {
  const alVal = alignContent.value;
  const dVal = display.value;
  container.style.alignContent = alVal;
  container.style.display = dVal;
  alignStyle.innerText = alVal;
  displayStyle.innerText = dVal;
}
updatePage();

Результат

Попробуйте изменить значение display и значение align-content.

В блочной раскладке дочерние элементы рассматриваются как единый элемент, поэтому space-between, space-around и space-evenly работают иначе.

Спецификации

Совместимость с браузерами

См. также

• Основные понятия флексбокса
• Выравнивание элементов во флекс-контейнере
• Выравнивание блоков в раскладке сетки
• Выравнивание блоков CSS
• Блочная и строчная раскладка в обычном потоке
• Содержимое блочного уровня
• display