box-orient

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

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

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

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
动画类型离散值

形式语法

Error: could not find syntax for this item

示例

设置盒子水平布局

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

HTML

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

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

结果

规范

不是任何标准的一部分。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
box-orient
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见