elementUI中折叠面板箭头图标位置调整到最左边

跟flex布局有关

原始代码

<div id="app">
<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="一致性 Consistency" name="1">
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  </el-collapse-item>
</el-collapse>
</div>

原始效果

修改之后

第一部分

<div id="app">
<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item name="1">
    <span class="collapse-title" slot="title">一致性 Consistency</span>
    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
  </el-collapse-item>
</el-collapse>
</div>

第二部分

<style scoped>
.collapse-title {
  flex: 1 0 90%;
  order: 1;
}
</style>