1、App.vue的<style>中全局阴影

<style>
/* 引入flex布局样式 */
@import "./styles/flex.css";
</style>

2、编写flex.css文件

@charset "UTF-8";.flex {display: -webkit-flex;display: flex;
}/*即项目的排列方向*/
.flex-direction-row {display: -webkit-flex;display: flex;flex-direction: row;
}.flex-row {display: -webkit-flex;display: flex;flex-direction: row;
}.flex-direction-reverse {display: -webkit-flex;display: flex;flex-direction: row-reverse;
}.flex-direction-column {display: -webkit-flex;display: flex;flex-direction: column;
}.flex-col {display: -webkit-flex;display: flex;flex-direction: column;
}/*如果一条轴线排不下，如何换行*/
.flex-wrap-nowrap {display: -webkit-flex;display: flex;flex-wrap: nowrap;
}.flex-wrap-wrap {display: -webkit-flex;display: flex;flex-wrap: wrap;
}.flex-wrap-reverse {display: -webkit-flex;display: flex;flex-wrap: wrap-reverse;
}/*属性定义了项目在主轴上的对齐方式。*/
.flex-justify-start {display: -webkit-flex;display: flex;justify-content: flex-start;
}.flex-justify-end {display: -webkit-flex;display: flex;justify-content: flex-end;
}.flex-justify-center {display: -webkit-flex;display: flex;justify-content: center;
}.flex-justify-between {display: -webkit-flex;display: flex;justify-content: space-between;
}.flex-justify-around {display: -webkit-flex;display: flex;justify-content: space-around;
}/*属性定义项目在交叉轴上如何对齐*/
.flex-align-start {display: -webkit-flex;display: flex;align-items: flex-start;
}.flex-align-end {display: -webkit-flex;display: flex;align-items: flex-end;
}.flex-align-center {display: -webkit-flex;display: flex;align-items: center;
}.items-center {align-items: center;
}.justify-center {justify-content: center;
}.flex-align-baseline {display: -webkit-flex;display: flex;align-items: baseline;
}.flex-align-stretch {display: -webkit-flex;display: flex;align-items: stretch;
}

3、直接去页面上写上类名就可以使用了

<template><div><div class="flex-justify-center flex-align-center">dd</div></div>
</template>