align-content

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

Свойство css align-content устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси элемента типа flexbox или grid.

The interactive example below use Grid Layout to demonstrate some of the values of this property.

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

Синтаксис

/* Основное позиционное выравнивание */
/* align-content не принимает значения left и right */
align-content: center;     /* Расположить элементы вокруг центра */
align-content: start;      /* Расположить элементы в начале */
align-content: end;        /* Расположить элементы в конце */
align-content: flex-start; /* Расположить элементы flex в начале */
align-content: flex-end;   /* Расположить элементы flex в конце */

/* Нормальное выравнивание */
align-content: normal;

/* Выравнивание по базовой линии */ 
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* Распределённое выравнивание */
align-content: space-between; /* Распределить элементы равномерно
                                 Первый элемент находится на одном уровне с началом,
                                 последней - совпадает с концом */
align-content: space-around;  /* Распределить элементы равномерно
                                 Элементы имеют половинное пространство
                                 на каждом конце */
align-content: space-evenly;  /* Распределить элементы равномерно
                                 Элементы имеют одинаковое пространство вокруг них */
align-content: stretch;       /* Распределить элементы равномерно
                                 Растянуть 'auto'-размерные элементы, чтобы заполнить
                                 контейнер */

/* Выравнивание переполнения (overflow) */
align-content: safe center;
align-content: unsafe center;

/* Глобальные значения */
align-content: inherit;
align-content: initial;
align-content: unset;

Значения

start
Элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.
end
Элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.
flex-start
Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как start.
flex-end
Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как end.
center
Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.
normal
Элементы расположены в их дефолтной позиции как если бы align-content не было определено.
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
Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.

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

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

Пример

CSS

#container {
  height:200px;
  width: 240px;
  align-content: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

Результат

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

Спецификация Статус Комментарий
CSS Box Alignment Module Level 3
Определение 'align-content' в этой спецификации.
Рабочий черновик Добавлены значения [ first | last ]? baseline, start, end, left, right, unsafe | safe.
CSS Flexible Box Layout Module
Определение 'align-content' в этой спецификации.
Кандидат в рекомендации Начальное определение

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

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!

Support in Flex layout

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 28
Полная поддержка 28
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 48
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 11Opera Полная поддержка 12.1Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 28
Полная поддержка 28
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 48
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 7
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 2.0
Полная поддержка 2.0
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -webkit-
baselineChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 45IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 9WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 45Opera Android Полная поддержка 43Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка 7.0
first baseline and last baselineChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 52IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 11WebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 52Opera Android Нет поддержки НетSafari iOS Полная поддержка 11Samsung Internet Android Нет поддержки Нет
left and rightChrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Нет поддержки 52 — 60
Замечания
Нет поддержки 52 — 60
Замечания
Замечания align-content no longer accepts the left and right values
IE Нет поддержки НетOpera Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari Нет поддержки НетWebView Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Android Нет поддержки 52 — 60
Замечания
Нет поддержки 52 — 60
Замечания
Замечания align-content no longer accepts the left and right values
Opera Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
safe and unsafeChrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Полная поддержка 63IE Нет поддержки НетOpera Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
WebView Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Android Полная поддержка 63Opera Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari iOS Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Samsung Internet Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
space-evenlyChrome Полная поддержка 60Edge Полная поддержка 79Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 47Safari Полная поддержка 11WebView Android Полная поддержка 60Chrome Android Полная поддержка 60Firefox Android Полная поддержка 52Opera Android Полная поддержка 44Safari iOS Полная поддержка 11Samsung Internet Android Полная поддержка 8.0
start and endChrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Полная поддержка 45IE Нет поддержки НетOpera Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari Нет поддержки НетWebView Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Android Полная поддержка 45Opera Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
stretchChrome Полная поддержка 57Edge Полная поддержка 79Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 9WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Полная поддержка 52Opera Android Полная поддержка 43Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка 7.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Support in Grid layout

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Grid LayoutChrome Полная поддержка 57Edge Полная поддержка 16Firefox Полная поддержка 52IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 10.1WebView Android Полная поддержка 57Chrome Android Полная поддержка 52Firefox Android Полная поддержка 52Opera Android Полная поддержка 43Safari iOS Полная поддержка 10.3Samsung Internet Android Полная поддержка 6.2

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

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