From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/order/index.html | 164 +++++++++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/zh-cn/web/css/order/index.html (limited to 'files/zh-cn/web/css/order/index.html') diff --git a/files/zh-cn/web/css/order/index.html b/files/zh-cn/web/css/order/index.html new file mode 100644 index 0000000000..44f597ff11 --- /dev/null +++ b/files/zh-cn/web/css/order/index.html @@ -0,0 +1,164 @@ +--- +title: order +slug: Web/CSS/order +translation_of: Web/CSS/order +--- +
{{ CSSRef("CSS Flexible Boxes") }}
+ +

概述

+ +

CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

+ +
+

注意: order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speech。

+
+ +

{{cssinfo}}

+ +

参考 使用 CSS 弹性盒子 获取更多信息。

+ +

语法

+ +
/* Numerical value including negative numbers */
+order: 5;
+order: -5;
+
+/* Global values */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

取值

+ +
+
<integer>
+
表示此可伸缩项目所在的次序组。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

例子

+ +

这里是一个基本的HTML代码片段:

+ +
<!DOCTYPE html>
+<header>…</header>
+<div id='main'>
+   <article>…</article>
+   <nav>…</nav>
+   <aside>…</aside>
+</div>
+<footer>…</footer>
+ +

下面的CSS代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。 Flexible Box 布局模块会自动地创建三个具有相同高度的内容块，也会使用所有可用的水平空间。

+ +
#main { display: flex; }
+#main > article { flex:1;         order: 2; }
+#main > nav     { width: 200px;   order: 1; }
+#main > aside   { width: 200px;   order: 3; }
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#order-property', 'order') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome(21.0) }}{{ property_prefix("-webkit") }}
+ 29		 +

{{ CompatGeckoDesktop("18.0") }} (behind a pref) [1][3]
+ {{CompatGeckoDesktop("20.0")}}
+ 28

+ 		+

10.0, but under the non-standard -ms-flex-order name {{ property_prefix("-ms") }}  [2]
+ 11

+ 		12.10 +

7 {{ property_prefix("-webkit") }}
+ 9

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatGeckoMobile("18.0") }} (behind a pref) [1]
+ {{CompatGeckoMobile("20.0")}}		{{ CompatUnknown }}12.10 +

7 {{ property_prefix("-webkit") }}
+ 9

+ +

 

+
+
+ +

[1] 在 Firefox 18 和 19 中使用弹性布局，需要将 about:config 中 layout.css.flexbox.enabled 设置为 true。从 Firefox 28 起开始完整支持。

+ +

Firefox 中不正确地更改元素的 Tab 顺序. 查看 {{bug("812687")}}。

+ +

[2] In addition to the unprefixed support, Gecko 48.0 {{geckoRelease("48.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[3] 在 Internet Explorer 10 中，使用 display: -ms-flexbox 来声明弹性盒子。-ms-flex-order 属性是非标准实现。

+ +

参考

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