box-orient

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 的元素生效。

语法

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

• Flexible Box Layout Module (W3C Working Draft)
  Note: 此规范的当前状态不反映Mozilla或WebKit的旧实现。
• Old Flexible Box Layout Module
  Note: Mozilla和WebKit的实现用来反映这个版本的规范。

Browser compatibility

See also

• box-direction
• box-pack
• box-align
• flex-direction