uniapp 使用display: flex; 使用flex-wrap: wrap; view怎么换行
时间: 2024-02-17 10:59:02 浏览: 28
在uni-app中,可以使用`display: flex;`和`flex-wrap: wrap;`来实现view的换行效果。
首先,在需要实现换行的view的父容器上设置`display: flex;`,这样可以将子元素排列在一行上。
然后,再设置`flex-wrap: wrap;`,这样当子元素的宽度超过父容器宽度时,会自动换行显示。
以下是一个示例代码:
```html
<template>
<view class="container">
<view class="item">Item 1</view>
<view class="item">Item 2</view>
<view class="item">Item 3</view>
<view class="item">Item 4</view>
<view class="item">Item 5</view>
<view class="item">Item 6</view>
</view>
</template>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
</style>
```
在上面的代码中,`.container`是父容器,`.item`是子元素。当子元素的宽度超过父容器宽度时,会自动换行显示。
希望能帮助到你!如果还有其他问题,请继续提问。