justify-content

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

CSS свойство  justify-content определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex контейнера, или вдоль строчной оси grid контейнера.

Интерактивный пример ниже демонстрирует некоторые значения, используя Grid размещение.

Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во Flexbox разметке есть хотя бы один flex-элемент, с flex-grow отличным от 0, эффект не будет применен, потому что не останется свободного места.

Синтаксис

/* Позиционное выравнивание */
justify-content: center;     /* Выравнивание элементов по центру */
justify-content: start;      /* Выравнивание элементов в начале */
justify-content: end;        /* Выравнивание элементов в конце */
justify-content: flex-start; /* Выравнивание флекс-элементов с начала */
justify-content: flex-end;   /* Выравнивание флекс-элементов с конца */
justify-content: left;       /* Выравнивание элементов по левому краю */
justify-content: right;      /* Выравнивание элементов по правому краю */

/* Выравнивание относительно осевой линии */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Распределенное выравнивание */
justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.
                                   Первый элемент вначале, последний в конце */
justify-content: space-around;  /* Равномерно распределяет все элементы по ширине flex-блока.
                                   Все элементы имеют полуразмерное пространство

                                   с обоих концов */
justify-content: space-evenly;  /* Равномерно распределяет все элементы по ширине flex-блока.
                                   Все элементы имеют равное пространство вокруг */
justify-content: stretch;       /* Равномерно распределяет все элементы по ширине flex-блока.
                                   Все элементы имеют "авто-размер", чтобы соответствовать

                                   контейнеру */

/* Выравнивание при переполнении */
justify-content: safe center;
justify-content: unsafe center;

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

Значения

start
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.
end
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.
flex-start
Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как start.
flex-end
Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как end.
center
Элементы располагаются друг за другом в центре контейнера по главной оси.
left
Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  start.
right
Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как  start.
baseline
first baseline

last baseline
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline is start, the one for last baseline is end.
space-between
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний - к концу.
space-around
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.
space-evenly
Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.
stretch
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.

Примечание: stretch не поддерживается гибкими контейнерами (flexbox).

safe
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
unsafe
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

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

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

где
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

Пример

CSS

#container {
  display: flex;
  justify-content: space-between; /* Может быть изменено */
}

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

Результат

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

Спецификация Статус Комментарий
CSS Box Alignment Module Level 3
Определение 'justify-content' в этой спецификации.
Рабочий черновик Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, space-evenly, unsafe | safe values.
CSS Flexible Box Layout Module
Определение 'justify-content' в этой спецификации.
Кандидат в рекомендации Initial definition
Начальное значениеnormal
Применяется кflex-контейнеры
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

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

Поддержка в Flex разметке

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Полная поддержка 52
Полная поддержка 52
Частичная поддержка 29
Замечания
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Before Firefox 27, Firefox supported only single-line flexbox.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 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 Полная поддержка 52
Полная поддержка 52
Частичная поддержка 4.4
Замечания
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 52
Полная поддержка 52
Частичная поддержка 29
Замечания
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Before Firefox 27, Firefox supported only single-line flexbox.
Нет поддержки 18 — 20
Отключено
Отключено From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 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
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 6.0
Полная поддержка 6.0
Частичная поддержка 2.0
Замечания
Замечания Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Полная поддержка 1.5
С префиксом
С префиксом Требует вендорный префикс: -webkit-
baselineChrome Полная поддержка 57Edge Полная поддержка 79Firefox Нет поддержки 45 — 60
Замечания
Нет поддержки 45 — 60
Замечания
Замечания justify-content no longer accepts baseline values
IE Нет поддержки НетOpera Полная поддержка 44Safari Нет поддержки НетWebView Android Полная поддержка 57Chrome Android Полная поддержка 57Firefox Android Нет поддержки 45 — 60
Замечания
Нет поддержки 45 — 60
Замечания
Замечания justify-content no longer accepts baseline values
Opera Android Полная поддержка 43Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0
first baseline and last baselineChrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 52 — 60
Замечания
Нет поддержки 52 — 60
Замечания
Замечания justify-content no longer accepts baseline values
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки 52 — 60
Замечания
Нет поддержки 52 — 60
Замечания
Замечания justify-content no longer accepts baseline values
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
left and rightChrome Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Полная поддержка 52IE Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Opera Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari Полная поддержка 9WebView Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Chrome Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Firefox Android Полная поддержка 52Opera Android Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This value is recognized, but has no effect.
Safari iOS Полная поддержка 9Samsung 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 Полная поддержка 9WebView 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 Полная поддержка 9Samsung 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

Легенда

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

Поддержка в Grid разметке

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

Легенда

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

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