flex布局下的<el-tooltip>位置问题与解决方案

问题描述
想在<el-tabs></el-tabs>里的每一个<el-tab-pane></el-tab-pane>上加一个<el-tooltip></el-tooltip>
代码如下所示：

<el-tabs v-model="choseTab" tab-position="left">
    <el-tab-pane v-for="(config,k) in assetCheckConfig" :key="k.toString()"
                 :label="config.category+' ('+ config.enabledCount + '/'+ config.rules.length + ')'"
                 :name="k.toString()">
        <span slot="label">
            <el-tooltip placement="right">
                <div slot="content">
                    <span>{{"XxxxxxxxxxxxxxXxxxxxxxxxxxxxXxxxxxxxxxxxxxXxxxxxxxxxxxxx"}}</span>
                    <span v-if="config.changedCustomizedCount!==0">
                        {{", "+config.changedCustomizedCount+$t("projectDetail.cusParaChanged")}}
                    </span>
                    <span v-else>
                        {{"."}}
                    </span>
                </div>
                <div style="display: flex;justify-content:space-between; align-items:center">
                    <div>{{config.category+' ('+ config.enabledCount + '/'+ config.rules.length + ')'}}</div>
                </div>
            </el-tooltip>
        </span>
    </el-tab-pane>
</el-tabs>

但是，展示效果并不是很好看。tips的位置太靠右了，感觉它是绑在了整个div盒子的right，而我们真正想要的效果是写在这段文字的后面。
效果如下图所示：

解决方法
将display: flex;更改为display: inline-flex。即，将<el-tooltip>绑定的对象设置成为一个行内元素。
更改后的效果，如下图所示：

Flex学习（阮一峰搬运）
通过这个问题，我把flex有复习了一下，现在做一下阮一峰的搬运工。

1.简述
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。
display: flex; / inline-flex;

2.Flex 容器属性

flex-direction: row | row-reverse | column | column-reverse; //主轴排列方向：row
flex-wrap: nowrap | wrap | wrap-reverse;//默认不换行nowrap 
flex-flow: <flex-direction> || <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around;//默认左对齐flex-start，最常用space-between
align-items：flex-start | flex-end | center | baseline | stretch; //默认stretch占满整个容器高端，一般会设置为center
align-content: flex-start | flex-end | center | space-between | space-around | stretch; //默认stretch

3.Flex Item属性

order: <integer>; //数值越小，排列越靠前，默认为0。
flex-grow: <number>; //默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink: <number>;//定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis: <length> | auto;
align-self: auto | flex-start | flex-end | center | baseline | stretch; //属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。