box-direction

非标准： 此特性是非标准的，并且不在标准化轨道上。不要在面向 Web 的生产网站上使用它：它不会对所有用户起作用。实现之间也可能存在较大的不兼容性，并且行为可能会在将来发生变化。

已弃用： 此特性不再推荐使用。虽然某些浏览器可能仍然支持它，但它可能已被从相关的网络标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表，以指导您的决定。请注意，此特性可能随时停止工作。

警告： 这是原始 CSS 弹性盒子布局模块草案中的一个属性，已被更新的标准取代。-moz-box-direction 将仅用于 XUL，而先前标准 box-direction 已被 flex-direction 取代。有关当前标准的信息，请参见弹性盒子。

box-direction CSS 属性指定盒子是按常规方式（从顶部或左侧边缘）还是按反向方式（从底部或右侧边缘）排列其内容。

语法

css
/* Keyword values */
box-direction: normal;
box-direction: reverse;

/* Global values */
box-direction: inherit;
box-direction: initial;
box-direction: revert;
box-direction: revert-layer;
box-direction: unset;

box-direction 属性指定为以下列出的关键字值之一。

值

normal

盒子从起始位置（左侧或顶部边缘）排列其内容。

reverse

盒子从结束位置（右侧或底部边缘）排列其内容。

注释

出于布局目的，指定为起始的盒子边缘取决于盒子的方向

  • 对于水平元素，起始是顶部边缘。
  • 对于垂直元素，起始是左侧边缘。

与起始位置相对的边缘被指定为结束。

如果方向是使用元素的 dir 属性设置的，则样式将被忽略。

正式定义

初始值normal
适用于具有 CSS display 值为 box 或 inline-box 的元素
继承否
计算值如指定
动画类型离散

正式语法

box-direction =
  normal | reverse | inherit

示例

设置盒子方向

css
.example {
  /* bottom-to-top layout */
  -moz-box-direction: reverse; /* Mozilla */
  -webkit-box-direction: reverse; /* WebKit */
  box-direction: reverse; /* As specified */
}

规范

不是任何标准的一部分。

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载

另请参阅