非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
这是原始的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 type | discrete |
正式语法
示例
设置盒子水平布局
在这里,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 */
}
结果
规范
不是任何标准的一部分。
浏览器兼容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.