css 常用的样式汇总（持续更新...）

可以将样式写到公共的css页面 app.vue里面引入 就可以全局使用class名就好了 很方便！！！

css文字一行显示

white-space: nowrap;

css文字超出现实省略号

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

下边框

.borderBottmon {
	border-bottom: 1px solid #e5e5e5;
}

单行文本省略

.ellipsis1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

超出部分显示…

.text-overflow {
	overflow: hidden;
	/*超出部分隐藏*/
	white-space: nowrap;
	/*不换行*/
	text-overflow: ellipsis;
	/*超出部分文字以...显示*/
}

怪异盒模型

.boxSizing {
	box-sizing: border-box;
}

flex横向左右两边布局

.flex-space-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

flex垂直居中布局

.flex-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

flex横向不居中布局

.flex-box {
	display: flex;
	align-items: center;
}

flex横向居中布局

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

flex横向平均布局

.flex-space-around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

flex 布局

.flex {
	display: flex;
	flex-direction: row;
}

文字对齐

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

垂直居中

.align-center {
	align-items: center;
}

.justify-content {
	justify-content: center;
}

.horizontal-center {
	margin: 0 auto;
}

两端对齐

.justify-between {
	justify-content: space-between;
}

文字换行溢出处理

.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

内容溢出

.overflow-hidden {
	overflow: hidden;
}