box-direction

在此页

句法
注意事项
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. The -moz-box-direction will only be used for XUL while the previous standard box-direction has been replaced by flex-direction 。见 flexbox for information about the current standard.

box-direction CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

/* Keyword values */
box-direction: normal;
box-direction: reverse;
/* Global values */
box-direction: inherit;
box-direction: initial;
box-direction: unset;

句法

box-direction property is specified as one of the keyword values listed below.

值

normal
reverse

注意事项

The edge of the box designated the start for layout purposes depends on the box's orientation:

Horizontal	left
Vertical	top

The edge opposite to the start is designated the end .

If the direction is set using the element's dir attribute, then the style is ignored.

形式定义

初始值	`normal`
适用于	elements with a CSS `display` value of `box` or `inline-box`
继承	no
计算值	如指定
动画类型	discrete

形式句法

normal | reverse | inherit

范例

Setting box direction

.example {
  /* bottom-to-top layout */
  -moz-box-direction: reverse;      /* Mozilla */
  -webkit-box-direction: reverse;   /* WebKit */
  box-direction: reverse;           /* As specified */
}

规范

Not part of any standard.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`box-direction` 弃用非标	Chrome 完整支持 1 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge 完整支持 12 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox 完整支持 1 Prefixed 完整支持 1 Prefixed Prefixed Implemented with the vendor prefix: -moz- preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 15 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari 完整支持 3 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 不支持 1.1 — 3 Prefixed Prefixed Implemented with the vendor prefix: -khtml-	WebView Android 完整支持 ≤37 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android 完整支持 18 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android 完整支持 4 Prefixed 完整支持 4 Prefixed Prefixed Implemented with the vendor prefix: -moz- preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 14 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS 完整支持 1 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android 完整支持 1.0 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-

图例

完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

另请参阅

元数据

最后修改： Jul 28, 2020

在此页

句法

值