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/order/index.html | 98 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/ru/web/css/order/index.html (limited to 'files/ru/web/css/order/index.html') diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html new file mode 100644 index 0000000000..8ee0382c91 --- /dev/null +++ b/files/ru/web/css/order/index.html @@ -0,0 +1,98 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS Flexible Boxes + - CSS свойства +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

CSS свойство  order определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению order. Элементы с одинаковым значением order  располагаются в том порядке, в каком они находятся в исходном коде.

+ +
{{EmbedInteractiveExample("pages/css/order.html")}}
+ + + +

Синтаксис

+ +
/* Числовые значения, в том числе отрицательные */
+order: 5;
+order: -5;
+
+/* Глобальные значения */
+order: inherit;
+order: initial;
+order: unset;
+ +
+

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

+
+ +

Посмотрите Используем CSS flexible boxes для более подробной информации и дополнительных свойствах.

+ +

Значения

+ +
+
<integer>
+
Представляет порядковую группу, которая присвоена flex элементу.
+
+ +

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

+ +
{{csssyntax}}
+ +

Примеры

+ +

Имеется базовый отрывок HTML кода:

+ +
<header>...</header>
+<main>
+  <article>Article</article>
+  <nav>Nav</nav>
+  <aside>Aside</aside>
+</main>
+<footer>...</footer>
+ +

Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

+ +
main { display: flex;  text-align:center; }
+main > article { flex:1;        order: 2; }
+main > nav     { width: 200px;  order: 1; }
+main > aside   { width: 200px;  order: 3; }
+ +

Результат

+ +

{{ EmbedLiveSample('Example') }}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Начальное определение
+ +

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

+ + + +

{{Compat("css.properties.order")}}

+ +

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

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