--- title: order slug: Web/CSS/order translation_of: Web/CSS/order --- <div>{{ CSSRef("CSS Flexible Boxes") }}</div> <h2 id="Summary" name="Summary">概述</h2> <p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> <strong><code>order</code></strong> 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 <code>order</code> 属性的值的增序进行布局。拥有相同 <code>order</code> 属性值的元素按照它们在源代码中出现的顺序进行布局。</p> <div class="note"> <p><strong>注意</strong>: <code>order</code> 仅仅对元素的视觉顺序 (<strong>visual order</strong>) 产生作用,并不会影响元素的逻辑或 tab 顺序。 <code><strong>order</strong></code> 不可以用于非视觉媒体,例如 speech。</p> </div> <p>{{cssinfo}}</p> <p>参考 <a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a> 获取更多信息。</p> <h2 id="Syntax" name="Syntax">语法</h2> <pre class="brush:css">/* Numerical value including negative numbers */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: unset; </pre> <h3 id="Values" name="Values">取值</h3> <dl> <dt><code><integer></code></dt> <dd>表示此可伸缩项目所在的次序组。</dd> </dl> <h3 id="Formal_syntax">Formal syntax</h3> {{csssyntax}} <h2 id="Examples" name="Examples">例子</h2> <p>这里是一个基本的HTML代码片段:</p> <pre class="brush:html;"><!DOCTYPE html> <header>…</header> <div id='main'> <article>…</article> <nav>…</nav> <aside>…</aside> </div> <footer>…</footer></pre> <p>下面的CSS代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。 Flexible Box 布局模块会自动地创建三个具有相同高度的内容块,也会使用所有可用的水平空间。</p> <pre class="brush:css;">#main { display: flex; } #main > article { flex:1; order: 2; } #main > nav { width: 200px; order: 1; } #main > aside { width: 200px; order: 3; }</pre> <h2 id="Specifications" name="Specifications">规范</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</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="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> {{Compat("css.properties.order")}} <h2 id="See_also" name="See_also">参考</h2> <ul> <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="使用 CSS 弹性盒子">使用 CSS 弹性盒子</a></li> </ul>