CSS3 box-orient 属性
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属性似乎在大多数现代浏览器中都得到了支持。