問題描述
想在<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。