Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

 

Свойство CSS align-content выравнивает линии контейнера flex в контейнере flex при наличии дополнительного пространства на перекрестной оси.

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


Дополнительные свойства и сведения см. в разделе использование гибких полей CSS.

 

Синтаксис

/* Pack lines from the cross-axis start */
align-content: flex-start;

/* Pack lines to the cross-axis end */
align-content: flex-end;

/* Pack lines around the cross-axis center */
align-content: center;

/* Distribute lines along the cross-axis, start to end */
align-content: space-between;

/* Distribute lines along the cross-axis, equally spaced */
align-content: space-around;

/* Stretch lines to occupy the whole cross-axis */
align-content: stretch;

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

Значения

flex-start
Линии упорядочиваются  начиная  с cross-start. Поперечная кромка первой линии и поперечная кромка контейнера flex сбрасываются вместе. Каждая следующая строка совпадает с предыдущей.
flex-end
Линии  упорядочиваются начиная cross-end. Кросс-энд последней линии и кросс-энд контейнера гибкого блока сбрасываются вместе. Каждая предыдущая строка очищается следующей строкой.
center

Линии упакованы к центру контейнера Flex. Линии выравниваются по центру контейнера flex. Расстояние между кросс-стартовым краем контейнера flex и первой линией, а также между кросс-эндом контейнера flex и последней линией одинаково.

space-between
Линии равномерно распределены в контейнере. Интервал делается так, чтобы расстояние между двумя соседними элементами было одинаковым. Поперечная кромка и поперечная кромка гибкого контейнера распределяются соответственно первой и последней кромками линии.
space-around
Линии равномерно распределены таким образом, что пространство между двумя соседними линиями одинаковые. Пустое пространство перед первой и после последней строки равняется половине расстояния между двумя смежными линиями.
stretch
Линии растягиваются, чтобы использовать оставшееся пространство. Свободное пространство разделено поровну между всеми линиями.

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

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

Примеры

HTML:

<div id="container">
  <p>align-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: stretch</p>
  <div id="stretch">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS:

#container > div {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 140px;
  height: 140px;
  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
}

#container > div > div {
  margin: 2px;
  width: 30px;
  min-height: 30px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#center {
  -webkit-align-content: center;
  align-content: center;
}

#flex-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

#space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}

#space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}

#stretch {
  -webkit-align-content: stretch;
  align-content: stretch;
}

Результат:

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

Specification Status Comment
CSS Flexible Box Layout Module
Определение 'align-content' в этой спецификации.
Кандидат в рекомендации Initial definition

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 21.0-webkit 28.0 Нет 12.10 Нет
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 28.0 Нет 12.10 Нет

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: m0nclous, ivan-ivan01, andreww2012
Обновлялась последний раз: m0nclous,