小程序中如何将View按照百分比，实现等宽高效果

yun382657988

于 2021-04-17 10:28:33 发布

阅读量1.2k

点赞数 1

分类专栏：微信小程序开发

原文链接：https://blog.csdn.net/weixin_42861240/article/details/88553807

版权

微信小程序开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用Flex布局和WXSS实现特定布局的方法。通过具体的代码示例，展示了如何设置视图容器的显示方式、对齐方式及方向等属性，并通过内部组件的具体样式实现预期的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、布局

<View className='Box'>
	<View className='Box1'>
		<View className='Box2'></View>
	</View>
</View>

2、wxss

.Box{
    display: flex;
    justify-content:space-between;
    flex-direction:row;
}
.Box1{
    width:23%;
    border:1rpx solid #ccc;
}
.Box2{
    padding-top:100%;
}

3、效果

在这里插入图片描述