From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/justify-items/index.html | 171 ++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/ru/web/css/justify-items/index.html (limited to 'files/ru/web/css/justify-items') diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html new file mode 100644 index 0000000000..23d4c75099 --- /dev/null +++ b/files/ru/web/css/justify-items/index.html @@ -0,0 +1,171 @@ +--- +title: Атрибут justify-items +slug: Web/CSS/justify-items +tags: + - CSS + - CSS атрибут + - CSS выравнивание блоков + - Ссылки +translation_of: Web/CSS/justify-items +--- +
+
{{CSSRef}}
+ +

Атрибут CSS justify-items определяет атрибут по умолчанию {{CSSxRef ("justify-self")}} для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.

+ +
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
+ + + +

Эффект этого атрибута зависит от выбранного способа разметки:

+ + + +

Синтаксис

+ +
/* Основные ключевые слова */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Выравнивание положения */
+justify-items: center;     /* Выровнять элементы по центру */
+justify-items: start;      /* Выровнять элементы в начале */
+justify-items: end;        /* Выровнять элементы в конце */
+justify-items: flex-start; /* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: flex-end;   /* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Выровнять элементы по левому краю */
+justify-items: right;      /* Выровнять элементы по правому краю */
+
+/* Исходное выравнивание */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Выравнивание при переполнении (только для выравнивания положения) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Унаследованное выравнивание */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Глобальные значения */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+
+ +

Этот атрибут может принимать одну из четырех различных форм:

+ + + +

Значения

+ +
+
auto
+
Используемое значение является значением атрибута justify-items родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение auto представляет собой значение normal.
+
normal
+
Эффект этого атрибута зависит от выбранного способа разметки: +
    +
  • Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова start
    • +
  • Для разметки с абсолютно позиционнированными элементами, это ключевое слово ведет себя как start на замененных блоках с абсолютным позиционированием и как stretch на всех остальных блоках с абсолютным позиционированием
    • +
  • Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
    • +
  • Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут игнорируется
    • +
  • Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению stretch, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как start
    • +
+
+
start
+
Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.
+
end
+
Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе  контейнера выравнивания по соответствующей оси.
+
flex-start
+
Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как start.
+
flex-end
+
Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как end.
+
self-start
+
Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.
+
self-end
+
Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.
+
center
+
Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.
+
left
+
Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
+
right
+
Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как start.
+
baseline
+ first baseline
+ last baseline
+
Определяет участие значений first baseline или last baseline в исходном выравнивании. Значение baseline выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.
+
Возвратным выравниванием для first baseline является значение start, для last baseline является значение end.
+
stretch
+
Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением auto увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.
+
safe
+
Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение start.
+
unsafe
+
Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.
+
legacy
+
Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение justify-self: auto, ключевое слово legacy не учитывается по нисходящему наследованию. Действует только со значением left, right, или center, связанным с ним.
+
+ +

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

+ +
{{CSSSyntax}}
+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}Первоначальное определение
+ +

{{CSSInfo}}

+ +

Поддержка браузерами

+ + + +

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

+ +

{{Compat("css.properties.justify-items.flex_context")}}

+ +

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

+ +

{{Compat("css.properties.justify-items.grid_context")}}

+ +

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

+ + +
-- cgit v1.2.3-54-g00ecf