微信小程序——css小技巧
1、子类元素的横排与竖排
.父类{
display: flex;
flex-direction: row; //横排
flex-direction: column; //竖排
}
2、margin-right:20px有可能会失效
解决办法:外围包裹一层<view>使用padding-right:20px;
2、scroll滚动
竖向滚动
<scroll-view scroll-y="false" class="scl_y">
<view class="red1"></view>
<view class="blue2"></view>
<view class="green3"></view>
<view class="yellow4"></view>
</scroll-view>
.scl_y{
height: 100px; //设置父高度
}
.scl_y view{
height: 100px; //设置子高度
}
横向滚动:
<scroll-view scroll-x="true" class="scl_x">
<view class="red1"></view>
<view class="blue2"></view>
<view class="green3"></view>
<view class="yellow4"></view>
</scroll-view>
.scl_x{
white-space: nowrap; //设置不换行
}
.scl_x view{
width: 100%;
display: inline-block;
height: 100px;
}
1、子类元素的横排与竖排
.父类{
display: flex;
flex-direction: row; //横排
flex-direction: column; //竖排
}
2、margin-right:20px有可能会失效
解决办法:外围包裹一层<view>使用padding-right:20px;
2、scroll滚动
竖向滚动
<scroll-view scroll-y="false" class="scl_y">
<view class="red1"></view>
<view class="blue2"></view>
<view class="green3"></view>
<view class="yellow4"></view>
</scroll-view>
.scl_y{
height: 100px; //设置父高度
}
.scl_y view{
height: 100px; //设置子高度
}
横向滚动:
<scroll-view scroll-x="true" class="scl_x">
<view class="red1"></view>
<view class="blue2"></view>
<view class="green3"></view>
<view class="yellow4"></view>
</scroll-view>
.scl_x{
white-space: nowrap; //设置不换行
}
.scl_x view{
width: 100%;
display: inline-block;
height: 100px;
}