微信小程序一行显示三个或四个宽度自适应width代码
时间: 2023-09-06 20:12:18 浏览: 173
微信小程序 图片宽度自适应的实现
可以使用Flex布局来实现微信小程序一行显示三个或四个宽度自适应的效果。具体实现步骤如下:
1. 在父元素上设置display:flex,flex-wrap:wrap属性,使其子元素可以自动换行。
2. 在子元素上设置flex-basis:calc(33.33% - 10px),其中33.33%表示每个子元素占据父元素宽度的1/3,10px表示子元素之间的间距。如果要每行显示四个元素,可以将33.33%改为25%即可。
示例代码如下:
```html
<!-- 父元素 -->
<view class="parent">
<!-- 子元素 -->
<view class="child">1</view>
<view class="child">2</view>
<view class="child">3</view>
<view class="child">4</view>
<view class="child">5</view>
<view class="child">6</view>
</view>
```
```css
/* 父元素样式 */
.parent {
display: flex;
flex-wrap: wrap;
}
/* 子元素样式 */
.child {
flex-basis: calc(33.33% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
```
上述示例代码中,每个子元素的宽度会根据父元素的宽度自适应,保证每行显示三个元素并且之间有10px的间距。如果要每行显示四个元素,只需要将`.child`的`flex-basis`属性改为`25%`即可。
阅读全文