box-orient
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
警告： 这是原始 CSS 弹性盒布局模块草案的属性，已被更新的标准取代。有关当前标准的信息，请参阅弹性盒。
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（行内轴）-
盒模型沿行内轴显示其子级。
block-axis（块级轴）-
盒模型沿块级轴显示其子级。
行内轴和块级轴是依赖于书写模式的关键字，在英语中，它们分别映射到 horizontal（水平）和 vertical（垂直）。
描述
HTML DOM 元素默认沿行内轴布置其内容。此 CSS 属性仅适用于具有 CSS display 值为 box 或 inline-box 的 HTML 元素。
正式定义
正式语法
box-orient =
horizontal |
vertical |
inline-axis |
block-axis
示例
设置水平盒模型方向
在此处，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 */
}
结果
规范
不属于任何标准。
浏览器兼容性
加载中…