前端css样式封装-flex

Posted 2021-06-28 JackieDYH

html,
body {
	height: 100%;
	// overflow-y:  auto;
	// position:  relative;
}

#root {
	height: 100%;
	position: relative;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif !important;
}



/* 为元素设定的宽度和高度决定了元素的边框盒 */
div {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0);
}

a {
	text-decoration: none;
}



/* 默认图片是行内元素 */
img {
	display: inline-block;
}



/* 关闭滚动条  */
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}



/* 超过一行显示省略号 */
.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}



/* 去除边框 */
button {
	margin: 0;
	padding: 0;
	font: 400 15px/1.4 '';
	/*移动端和H5需要自己调试一下 px 或 rpx 大小*/

	background: unset;
}

button::after {
	border: none;
}



/* 弹性布局盒模型 */
.flex {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
}



/* 弹性布局盒模型可换行 */
.rowW {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-wrap: wrap;
}



/* 水平垂直居中 */
.centerXY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
}



/* 上下居中 */
.centerY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}



/* 横向排列 */
.rowX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}



/* 横向排列,所有元素放置于底部 */
.bottomY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}



/* 左右居中 */
.centerX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}



/* 纵向排列 */
.columnY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}



/* 向左向右 */
.betweenX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}



/* 向上向下 */
.betweenY {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.rightX {
	display: -moz-box;
	/* Firefox */
	display: -ms-flexbox;
	/* IE10 */
	display: -webkit-box;
	/* Safari */
	display: -webkit-flex;
	/* Chrome, WebKit */
	display: box;
	display: flexbox;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* justify-content: flex-end; */
}




/*定位全屏*/
.allcover {
	position: absolute;
	top: 0;
	right: 0;
}



/*定位上下左右居中*/
.centerAXY {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



/*定位上下居中*/
.centerAY {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}



/*定位左右居中*/
.centerAX {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}



/* 清楚浮动 */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}

.clearfix {
	zoom: 1;
}



/* 左浮动 */
.fl {
	float: left;
}



/* 右浮动 */
.fr {
	float: right;
}

.am-modal-mask {
	z-index: 9999999;
}

.am-modal-wrap {
	z-index: 9999999;
}

.am-list-header {
	padding: 0 !important;
}

.am-list-footer {
	padding: 0 !important;
}

.am-list-view-scrollview {
	height: 100vh;
}