uni-app、微信小程序基础布局CSS

最新推荐文章于 2024-08-10 08:10:46 发布

初来乍到的IT狗

最新推荐文章于 2024-08-10 08:10:46 发布

阅读量2k

点赞数

分类专栏：样式贴文章标签： uni-app 微信小程序 css样式

本文链接：https://blog.csdn.net/weixin_43829719/article/details/102967692

版权

本文分享了uni-app和微信小程序中常用的CSS基础布局技巧，内容涵盖全局样式设置和调用方法，适用于日常开发。随着实践的深入，作者将持续更新更多布局经验。

摘要由CSDN通过智能技术生成

这是我自己比较常用的，写到全局样式中，用到的时候直接调用就可以了。后续遇到还会更新。

page {
   
	background-color: #f5f5f5;
	font-size: 28upx;
	color: #333333;
	font-family: Helvetica Neue, Helvetica, sans-serif;
}

/* ---布局CSS--- */
.flex{
   
	display: flex;
}
.justify-center{
   
	justify-content: center;
}
.justify-between{
   
	justify-content: space-between;
}
.justify-around{
   
	justify-content: space-around;
}
.align-center{
   
	align-items: center;
}
.align-start{
   
	align-items: flex-start;
}
.align-end{
   
	align-items: flex-end;
}
.flex-column{
   
	flex-direction: column;
}
.flex-shrink{
   
	flex-shrink: 0;
}


/* ---内部白padding--- */
.padding-xs{
   
	padding: 10rpx;
}
.padding-sm{
   
	padding: 20rpx;
}
.padding-md{
   
	padding: 25rpx;
}
.padding-lg{
   
	padding: 30rpx;
}
.padding-xl{
   
	padding: 40rpx;
}
.padding-xxl{
   
	padding: 50rpx;
}
.padding-clear{
   
	padding: 0;
}
/* 上 */
.padding-top-xs{
   
	padding-top: 10rpx;
}
.padding-top-