box-orient

翻译正在进行中。

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

这是原始的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;

语法

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

值

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

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

规范

初始值inline-axis (horizontal in XUL)
适用元素elements with a CSS display value of box or inline-box
是否是继承属性否
计算值as specified
Animation typediscrete

正式语法

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

示例

设置盒子水平布局

在这里，box-orient 属性会将两个 <p> 段落布局到同一行。

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>

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 */
}

结果

规范

不是任何标准的一部分。

浏览器兼容性

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 15
Prefixed
Full support 15
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 14
Prefixed
Full support 14
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.

参见