wrap 可以变成竖向吗
时间: 2023-12-17 18:02:44 浏览: 132
竖向的seekbar滑动音量控制
4星 · 用户满意度95%
`wrap` 是用来设置容器内部元素的排列方式,实现横向排列或者换行排列。
如果想要实现竖向排列,可以使用 `flex-direction: column` 属性,将容器内部元素竖向排列。
以下是一个例子:
HTML 代码:
```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 class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
```
CSS 代码:
```css
.container {
display: flex;
flex-direction: column; /* 设置竖向排列 */
flex-wrap: wrap; /* 设置换行 */
height: 200px; /* 设置容器高度 */
}
.item {
width: 50px;
height: 50px;
background-color: #ccc;
margin: 10px;
}
```
上述代码将 `flex-direction` 设置为 `column`,实现竖向排列,同时设置 `flex-wrap: wrap`,实现换行排列。注意要设置容器的高度,否则元素会超出容器。
阅读全文