box-orient

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

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

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
Animation typediscrete

正式语法

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

结果

规范

不是任何标准的一部分。

浏览器兼容性

BCD tables only load in the browser

参见