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>