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

определение и использование

align-content изменение атрибута атрибут flex-wrap поведение атрибута. Оно аналогично align-items аналогично, но он выравнивает не эластичные элементы, а эластичные линии.

внимание:должно быть несколько строк, чтобы этот атрибут работал!

подсказка:использование justify-content атрибут выравнивает элементы по горизонтали по основному направлению (main-axis).

также см.:

Уроки CSS:CSS Flexbox

Уроки CSS:CSS Grid

Руководство по CSS:атрибут align-items

Руководство по CSS:атрибут align-self

Руководство по CSS:атрибут justify-content

Руководство по HTML DOM:атрибут alignContent

пример

упаковать строки в центр контейнера эластичности:

div {
  ширина: 70px;
  высота: 300px;
  граница: 1px сплошная #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

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

CSS синтаксис

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

значение атрибута

значение описание
stretch по умолчанию. Строки растягиваются, чтобы заполнить оставшееся пространство.
center строки打包 к центру контейнера эластичности.
flex-start строки打包 к началу контейнера эластичности.
flex-end строки打包 к концу контейнера эластичности.
space-between строки выровнены均匀 в контейнере эластичности.
space-around строки выровнены均匀 в контейнере эластичности, по краям по одной половине.
initial установить этот атрибут в его значение по умолчанию. См. также initial.
inherit получает этот атрибут от родительского элемента. См. также inherit.

технические детали

по умолчанию: stretch
наследование: нет
создание анимации: не поддерживается. См. также:атрибуты анимации.
версия: CSS3
JavaScript синтаксис: object.style.alignContent="center"

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

числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0