flex布局,行方向,加了两个view设置宽度30rpx来占位,结果运行起来这两个view完全没有宽度。
至于为什么要用view来占位,是因为如果为view设置margin或者padding,这个view就会把整个页面挤出超过100%的宽度来。具体的问题见这个帖子:https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=782248acf8e9554f7bce8255e8b8f3af&token=1817990123&lang=zh_CN
这是wxml代码:
<view class="exercise-type-container">
<view class="exercise-type-margin"></view>
<view class="exercise-type">
<image class="exercise-type-image" src="http://omj4lckbk.bkt.clouddn.com/evaluation/empty.png"></image>
<text class="exercise-type-text">wechat web kit is sb</text>
</view>
<view class="exercise-type">
<image class="exercise-type-image" src="http://omj4lckbk.bkt.clouddn.com/evaluation/empty.png"></image>
<text class="exercise-type-text">wechat web kit is sb</text>
</view>
<view class="exercise-type">
<image class="exercise-type-image" src="http://omj4lckbk.bkt.clouddn.com/evaluation/empty.png"></image>
<text class="exercise-type-text">wechat web kit is sb</text>
</view>
<view class="exercise-type">
<image class="exercise-type-image" src="http://omj4lckbk.bkt.clouddn.com/evaluation/empty.png"></image>
<text class="exercise-type-text">wechat web kit is sb</text>
</view>
<view class="exercise-type-margin"></view>
</view>
这是wxss:
.exercise-type-container {
margin-top: 50rpx;
width: 100%;
heigght: 100%;
display: flex;
flex-direction: row;
align-items: center;
overflow: scroll;
}
.exercise-type-margin {
display: inline-block;
width: 30rpx;
}
.exercise-type {
margin-right: 20rpx;
height: 200rpx;
}
.exercise-type-image {
border-radius: 10rpx;
border: 1px solid #999;
height: 120rpx;
width: 200rpx;
}
.exercise-type-text {
font-size: 26rpx;
color: #337733;
}
这是效果:
第一个子元素紧贴着左边框,完全看不到占位的view。
你们这套wxss布局框架一堆bug也敢放出来给大家用,真是服了。直接用css不行吗?