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

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

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-sm{
	padding-top: 20rpx;
}
.padding-top-md{
	padding-top: 25rpx;
}
.padding-top-lg{
	padding-top: 30rpx;
}
.padding-top-xl{
	padding-top: 40rpx;
}
.padding-top-xxl{
	padding-top: 50rpx;
}
.padding-top-clear{
	padding-top: 0;
}/* 右 */
.padding-right-xs{
	padding-right: 10rpx;
}
.padding-right-sm{
	padding-right: 20rpx;
}
.padding-right-md{
	padding-right: 25rpx;
}
.padding-right-lg{
	padding-right: 30rpx;
}
.padding-right-xl{
	padding-right: 40rpx;
}
.padding-right-xxl{
	padding-right: 50rpx;
}
.padding-right-clear{
	padding-right: 0;
}
/* 下 */
.padding-bottom-xs{
	padding-bottom: 10rpx;
}
.padding-bottom-sm{
	padding-bottom: 20rpx;
}
.padding-bottom-md{
	padding-bottom: 25rpx;
}
.padding-bottom-lg{
	padding-bottom: 30rpx;
}
.padding-bottom-xl{
	padding-bottom: 40rpx;
}
.padding-bottom-xxl{
	padding-bottom: 50rpx;
}
.padding-bottom-clear{
	padding-bottom: 0;
}
/* 左 */
.padding-left-xs{
	padding-left: 10rpx;
}
.padding-left-sm{
	padding-left: 20rpx;
}
.padding-left-md{
	padding-left: 25rpx;
}
.padding-left-lg{
	padding-left: 30rpx;
}
.padding-left-xl{
	padding-left: 40rpx;
}
.padding-left-xxl{
	padding-left: 50rpx;
}
.padding-left-clear{
	padding-left: 0;
}

/* ---外边距margin--- */
.margin-xs{
	margin: 10rpx;
}
.margin-sm{
	margin: 20rpx;
}
.margin-md{
	margin: 25rpx;
}
.margin-lg{
	margin: 30rpx;
}
.margin-xl{
	margin: 40rpx;
}
.margin-xxl{
	margin: 50rpx;
}
.margin-clear{
	margin: 0;
}
/* 上 */
.margin-top-xs{
	margin-top: 10rpx;
}
.margin-top-sm{
	margin-top: 20rpx;
}
.margin-top-md{
	margin-top: 25rpx;
}
.margin-top-lg{
	margin-top: 30rpx;
}
.margin-top-xl{
	margin-top: 40rpx;
}
.margin-top-xxl{
	margin-top: 50rpx;
}
.margin-top-clear{
	margin-top: 0;
}/* 右 */
.margin-right-xs{
	margin-right: 10rpx;
}
.margin-right-sm{
	margin-right: 20rpx;
}
.margin-right-md{
	margin-right: 25rpx;
}
.margin-right-lg{
	margin-right: 30rpx;
}
.margin-right-xl{
	margin-right: 40rpx;
}
.margin-right-xxl{
	margin-right: 50rpx;
}
.margin-right-clear{
	margin-right: 0;
}
/* 下 */
.margin-bottom-xs{
	margin-bottom: 10rpx;
}
.margin-bottom-sm{
	margin-bottom: 20rpx;
}
.margin-bottom-md{
	margin-bottom: 25rpx;
}
.margin-bottom-lg{
	margin-bottom: 30rpx;
}
.margin-bottom-xl{
	margin-bottom: 40rpx;
}
.margin-bottom-xxl{
	margin-bottom: 50rpx;
}
.margin-bottom-clear{
	margin-bottom: 0;
}
/* 左 */
.margin-left-xs{
	margin-left: 10rpx;
}
.margin-left-sm{
	margin-left: 20rpx;
}
.margin-left-md{
	margin-left: 25rpx;
}
.margin-left-lg{
	margin-left: 30rpx;
}
.margin-left-xl{
	margin-left: 40rpx;
}
.margin-left-xxl{
	margin-left: 50rpx;
}
.margin-left-clear{
	margin-left: 0;
}

/* ---颜色(根据项目主题色)--- */
.text-black{
	color: #333333;
}
.text-white{
	color: #FFFFFF;
}
.text-gray{
	color: #888888;
}
.text-main-color{
	color: #FF6100;
}
.text-second-color{
	color: #FEA501;
}

.bg-main-color{
	background-color: #FF6100;
	color: #FFFFFF;
}
.bg-second-color{
	background-color: #FEA501;
	color: #FFFFFF;
}
.bg-gradual-main-second{
	background-image: linear-gradient(to right,#FF6100, #FEA501);
	color: #FFFFFF;
}
.bg-gradual-second-main{
	background-image: linear-gradient(to right, #FEA501,#FF6100);
	color: #FFFFFF;
}

/* ---圆角--- */
.border-radius-xs{
	border-radius: 10rpx;
}
.border-radius-sm{
	border-radius: 20rpx;
}
.border-radius-md{
	border-radius: 25rpx;
}
.border-radius-lg{
	border-radius: 30rpx;
}
.border-radius-xl{
	border-radius: 40rpx;
}
.border-radius-circle{
	border-radius: 50%;
}