aizuda-web-vue3/src/styles/flex.scss

/* ============================================================
   flex：定义布局为盒模型
   flex-v：盒模型垂直布局
   flex-1：子元素占据剩余的空间
   flex-align-center：子元素垂直居中
   flex-pack-center：子元素水平居中
   flex-pack-justify：子元素两端对齐
   兼容性：ios 4+、android 2.3+、winphone8+、IE10+、Safari、Opera、Chrome、Firefox
   ============================================================ */
.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	display: -moz-flex;
	display: flex;
}
.flex-align-pack-center {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-moz-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.flex-v {
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.flex-1 {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-box-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.flex-align-center {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
// flex-align-start
.flex-align-start {
	-webkit-box-align: flex-start;
	-webkit-align-items: flex-start;
	-moz-box-align: flex-start;
	-moz-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
}

.flex-align-end {
	-webkit-box-align: flex-end;
	-webkit-align-items: flex-end;
	-moz-box-align: flex-end;
	-moz-align-items: flex-end;
	-ms-flex-align: flex-end;
	align-items: flex-end;
}

.flex-align-baseline {
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
	-moz-box-align: baseline;
	-moz-align-items: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}
.flex-pack-center {
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-moz-box-pack: center;
	-moz-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.flex-pack-end {
	-webkit-box-pack: flex-end;
	-webkit-justify-content: flex-end;
	-moz-box-pack: flex-end;
	-moz-justify-content: flex-end;
	-ms-flex-pack: flex-end;
	justify-content: flex-end;
}
.flex-pack-justify {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-moz-box-pack: justify;
	-moz-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex-pack-around {
	-webkit-box-pack: justify;
	-webkit-justify-content: space-around;
	-moz-box-pack: justify;
	-moz-justify-content: space-around;
	-ms-flex-pack: justify;
	justify-content: space-around;
}

.flex_align-center {
	display: flex;
	align-items: center;
}
.flex-wrap {
	flex-wrap: wrap;
}