CSS3 box-orient

CSS3 box-orient属性定义了弹性容器或弹性元素的主轴的方向。它可以设置为水平方向或垂直方向。这样可以调整内容块在容器内的排列方式，特别是当容器的宽度或高度不足以容纳所有内容时。这个属性的默认值是水平排列（horizontal）。

语法

box-orient: horizontal | vertical;

• horizontal: 表示弹性元素或弹性容器确定主轴方向为横向（从左到右）。
• vertical: 表示弹性元素或弹性容器确定主轴方向为纵向（从上到下）。

示例

HTML代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  height: 150px;
  box-orient: vertical;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin: 5px;
}

样式结果：

这个例子中，我们将包含内容块的容器div设置为flex，并且使用flex-wrap设置为wrap让内容块自动换行，设置了一个高度150px的高度限制，以实现排列不符合主轴方向的效果。为了实现排列方向为垂直方向，我们将box-orient设置为vertical。

兼容性

CSS3 box-orient属性似乎在大多数现代浏览器中都得到了支持。