flex弹性盒封装

.flex{
	display: flex;
}
.flex1{
	flex:1;
}
.flex_wrap{
	flex-wrap:wrap;
}

//上下左右排列居中 换行
.center_center_wrap{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
//垂直上下排列居中
.center_center_column{
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
}
//上下左右排列居中
.center_center{
	display: flex;
    justify-content: center;
    align-items: center;
}
//上下居中两端对齐
.center_between{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
//上下居中两端自由分配距离
.center_around{
	display: flex;
    justify-content: space-around;
    align-items: center;
}
//垂直居中，从头开始布局
.center_left{
	display: flex;
    justify-content: flex-start;
	align-items: center;
}
.center_right{
	display: flex;
    justify-content: flex-end;
	align-items: center;
}

//左右居中排列上下两端对齐
.top_between_column{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: space-between;
}
.top_around_column{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: space-around;
}

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

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

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