box-orient

在此页

句法
描述
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. See flexbox for information about the current standard.

box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

/* 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 property is specified as one of the keyword values listed below.

值

horizontal
vertical
inline-axis (HTML)
block-axis (HTML)

The inline and block axes are the writing-mode dependent keywords which, in English, map to horizontal and vertical 分别。

描述

HTML DOM elements lay out their contents along the inline-axis by default. This CSS property will only apply to HTML elements with a CSS display value of box or inline-box .

形式定义

初始值	`inline-axis` ( `horizontal` in XUL )
适用于	elements with a CSS `display` value of `box` or `inline-box`
继承	no
计算值	如指定
动画类型	discrete

形式句法

horizontal | vertical | inline-axis | block-axis | inherit

范例

Setting horizontal box orientation

Here, he box-orient property will cause the two <p> sections in the example to display in the same line.

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

结果

规范

Not part of any standard.

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`box-orient` 弃用非标	Chrome 完整支持 1 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge 完整支持 12 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox 完整支持 1 Prefixed 完整支持 1 Prefixed Prefixed Implemented with the vendor prefix: -moz- preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 15 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari 完整支持 3 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 不支持 1.1 — 3 Prefixed Prefixed Implemented with the vendor prefix: -khtml-	WebView Android 完整支持 ≤37 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android 完整支持 18 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android 完整支持 4 Prefixed 完整支持 4 Prefixed Prefixed Implemented with the vendor prefix: -moz- preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 14 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS 完整支持 1 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android 完整支持 1.0 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-

图例

完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

另请参阅

元数据

最后修改： Jul 28, 2020

在此页

句法

值

描述