uni-app 实用样式学习 flex
如果需要均分元素实现页面排版,需要在父级元素上写入desplay:flex;子级元素就会自动均分排版;如果想实现元素不同比例的排版,在子级元素加入:nth-of-type(x)样式来定义比例。
<view class="topbar">
<view class="a">最新</view>
<view class="a" hover-class="active">关注</view>
</view>
<style lang=less>
.topbar{
height:48rpx;
display: flex; //均分内部元素
justify-content: center; //内部元素自动居中
.a{text-align:center;flex:1;}
.a:hover-class{color:#ff0000;}
.a:nth-of-type(1){
flex:2;
}
.a:nth-of-type(2){
flex:1;
}
}
</style>


