CSS3 box-orient 属性

box-orient 属性用于指定一个元素的子元素的排列方向。该属性仅适用于 CSS 弹性布局（flexbox）模型。

值

• horizontal：子元素水平排列
• vertical：子元素垂直排列
• inline-axis：指定子元素按照文本方向排列
• block-axis：指定子元素按照块级元素方向排列

语法

element {
  box-orient: horizontal | vertical | inline-axis | block-axis;
}

示例

.container {
  display: flex;
  box-orient: horizontal;
}

.item {
  flex: 1;
}

在上面的示例中，.container 元素使用了 display: flex; 属性来定义为一个 flex 容器，然后使用 box-orient: horizontal; 属性来指定子元素水平排列。.item 元素则使用了 flex: 1; 属性来占据剩余空间。

兼容性

• Chrome：支持
• Firefox：支持
• Safari：支持
• Edge：支持
• IE：不支持

box-orient 属性在大多数现代浏览器中得到支持，但在 IE 浏览器中不支持。因此，在使用该属性时需要注意兼容性问题。