diff options
Diffstat (limited to 'files/ru/web/css/order/index.html')
| -rw-r--r-- | files/ru/web/css/order/index.html | 98 |
1 files changed, 98 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>order</code></strong> определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению <code>order</code>. Элементы с одинаковым значением <code>order</code> располагаются в том порядке, в каком они находятся в исходном коде.</p> + +<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:css no-line-numbers">/* Числовые значения, в том числе отрицательные */ +order: 5; +order: -5; + +/* Глобальные значения */ +order: inherit; +order: initial; +order: unset;</pre> + +<div class="note"> +<p><strong>Важно</strong>: <code>order</code> воздействует только на <strong>визуальный порядок</strong> элементов, но не логический порядок или табуляцию. <code><strong>order</strong></code> не должен применяться к невизуальным медиаданным, таким как речь.</p> +</div> + +<p>Посмотрите <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Используем CSS flexible boxes</a> для более подробной информации и дополнительных свойствах.</p> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code><integer></code></dt> + <dd>Представляет порядковую группу, которая присвоена flex элементу.</dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Примеры">Примеры</h2> + +<p>Имеется базовый отрывок HTML кода:</p> + +<pre class="brush:html;"><header>...</header> +<main> + <article>Article</article> + <nav>Nav</nav> + <aside>Aside</aside> +</main> +<footer>...</footer></pre> + +<p>Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.</p> + +<pre class="brush:css;">main { display: flex; text-align:center; } +main > article { flex:1; order: 2; } +main > nav { width: 200px; order: 1; } +main > aside { width: 200px; order: 3; }</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("css.properties.order")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/docs/Web/Guide/CSS/Flexible_boxes">Используя CSS flexible boxes</a></li> +</ul> |