uni-app 实用样式学习 flex

作者: gavin 分类: uniapp 发布时间: 2021-02-14 20:11

如果需要均分元素实现页面排版,需要在父级元素上写入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>

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注