elementui前端flex布局兼容IE10浏览器常用属性使用

/* 使用flex布局 */
.flex-container {
  display: -webkit-box; /* 兼容旧版本Webkit内核浏览器 */
  display: -moz-box;    /* 兼容Firefox */
  display: -ms-flexbox; /* 兼容IE10 */
  display: -webkit-flex; /* 兼容新版本Webkit内核浏览器 */
  display: flex;        /* 标准语法 */
  
  /* 以下是一些常用的flex属性示例 */
  
  /* 设置主轴方向 */
  -webkit-box-orient: horizontal; /* 老版本Webkit内核浏览器 */
  -webkit-flex-direction: row;    /* 新版本Webkit内核浏览器 */
  -ms-flex-direction: row;        /* IE10 */
  flex-direction: row;            /* 标准语法 */
  
  /* 设置项目在主轴上的对齐方式 */
  -webkit-justify-content: center; /* 老版本Webkit内核浏览器 */
  -webkit-flex-pack: center;       /* 新版本Webkit内核浏览器 */
  -ms-flex-pack: center;           /* IE10 */
  justify-content: center;         /* 标准语法 */
  
  /* 设置项目在交叉轴上的对齐方式 */
  -webkit-align-items: center; /* 老版本Webkit内核浏览器 */
  -webkit-flex-align: center;  /* 新版本Webkit内核浏览器 */
  -ms-flex-align: center;      /* IE10 */
  align-items: center;         /* 标准语法 */
}
 
/* 在flex容器中的项目 */
.flex-item {
  -webkit-box-flex: 1; /* 老版本Webkit内核浏览器 */
  -webkit-flex: 1;     /* 新版本Webkit内核浏览器 */
  -ms-flex: 1;         /* IE10 */
  flex: 1;             /* 标准语法 */
}

这段代码提供了使用flex布局的一个简单示例，并且为了兼容老版本的浏览器，包含了各种前缀。在实际开发中，你可以将这些样式直接应用到HTML元素上，并使用class="flex-container"或class="flex-item"来启用flex布局功能。