flex布局下的位置问题与解决方案

问题描述
想在里的每一个上加一个
代码如下所示：

    
        
            
                

                    {{"XxxxxxxxxxxxxxXxxxxxxxxxxxxxXxxxxxxxxxxxxxXxxxxxxxxxxxxx"}}
                    
                        {{", "+config.changedCustomizedCount+$t("projectDetail.cusParaChanged")}}
                    
                    
                        {{"."}}
                    
                
                

                    
{{config.category+' ('+ config.enabledCount + '/'+ config.rules.length + ')'}}
                
            
        
    

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

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

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