这篇翻译不完整。请帮忙从英语翻译这篇文章

非标准
该特性是非标准的,请尽量不要在生产环境中使用它!

这是原始的css弹性布局草案的一个属性,已经被最新的标准替代。 查看 flexbox 了解现行标准。

box-orient CSS 属性用来设置一个元素是水平还是垂直布局其内容。

/* Keyword values */
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/* Global values */
box-orient: inherit;
box-orient: initial;
box-orient: unset;

例如, XUL <xul:box><xul:hbox> 元素默认水平布局其内容,但是 XUL <xul:vbox> 元素默认垂直布局其内容。

 

默认情况下,HTML DOM元素沿内联轴布局其内容。 该 CSS 元素仅对那些设置了 display 属性的 box 或者 inline-box 的元素生效。

初始值inline-axis (horizontal in XUL)
适用元素elements with a CSS display value of box or inline-box
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

box-orient 属性值需指定为以下关键字之一。

Values

horizontal
盒子水平布局其内容。
vertical
盒子垂直布局其内容。
inline-axis (HTML)
盒子沿内联轴展示其子元素。
block-axis (HTML)
盒子沿块轴展示其子元素。

内联轴和块轴取决于写入模式的关键字,在英语中,分别对应水平和垂直方向。

Formal syntax

horizontal | vertical | inline-axis | block-axis | inherit

Examples

CSS

div.example {
  display: -moz-box;                /* Mozilla */
  display: -webkit-box;             /* WebKit */
  display: box;                     /* As specified */

  /* Children should be oriented vertically */
  -moz-box-orient: horizontal;      /* Mozilla */
  -webkit-box-orient: horizontal;   /* WebKit */
  box-orient: horizontal;           /* As specified */
}

HTML

<div class="example">
  <p>I will be to the left of my sibling.</p>
  <p>I will be to the right of my sibling.</p>
</div>

Result

box-orient 属性会将上面的两个 <p> 段落布局到同一行,如下面展示的这样:

Notes

针对 XUL 元素, 如果使用了 orient 元素设置了方向, 那么box-orient属性将被忽略。

Specifications

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
box-orient
DeprecatedNon-standard
Chrome Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 3
Prefixed
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 1.1 — 3
Prefixed
Prefixed Implemented with the vendor prefix: -khtml-
WebView Android Full support ≤37
Prefixed
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 18
Prefixed
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 4
Prefixed
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 1.0
Prefixed
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

文档标签和贡献者

此页面的贡献者: callmezhenzhen
最后编辑者: callmezhenzhen,