这篇文章主要介绍了flex布局实现左侧文字溢出省略右侧内容自适应的相关资料，本人觉得挺不错的，现在分享给大家，也给大家做个参考。
想要实现一个左侧文字可以根据文字长短自动调整宽度，当一行显示不下时，在不不挤压右侧内容空间的同时，左侧文字溢出省略。同理当右侧内容变长的时候，右侧内容部全显示，左侧文字被挤压后溢出，出现省略号的显示效果。光用文字表达，可能难以想象所要表达的效果，让我们看看效果图吧。
- 右侧文字是多少就是多宽，左侧默认占据剩余的所有空间。
- 右侧内容是多少就是多宽，和1一样。左侧文字很长很长溢出省略。
- 左侧文字和2一样，右侧内容给他加了两个right。
代码如下：
<style>
.footer {
width: 300px;
height: 20px;
display: flex;
overflow: hidden;
}
.left {
background: #3cc8b4;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 50px;
}
.right {
background: #9bc;
max-width: 250px;
}
.right-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<body>
<div class="footer">
<div class="left">
leftleftleftleftleftleftleftleftleftleftleftleftleft
</div>
<div class="right">
<div class="right-ellipsis">
rightrightrightrightrightrightrightrightright
</div>
</div>
</div>
</body>
代码中多加了max-width、min-width和叫right-ellipsis的div。是为了达到右侧内容超过所所设置的max-width值时，内容可以溢出省略的效果。效果如下图：
大家根据需要可以实现不同需求的效果了。设计需求总结：需求一：左侧宽度自动增长，右侧宽度自动增长并且不可溢出省略。需求二：当左侧文字长度超出的时候，左侧文字溢出省略
本文之所以能实现的此效果，主要的关键点在于
flex属性,下面来介绍下flex属性的相关作用
flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性
css 语法：
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
属性：
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 |
| flex-basis | 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。 |
| inherit | 从父元素继承该属性 |
flex-basis实例：
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 20px;
<!--可以简写以下形式-->
<!--flex: 0 0 20px; -->
}
#main div:nth-of-type(2) {
flex-basis: 80px;
}
</style>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
</body>
效果如下：
flex-grow实例:
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
</body>
效果如下：
flex-shrink 实例：
<style>
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 100px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
</style>
<body>
<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
效果图如下：
实例解析：
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
本例中A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2
我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子，所以加权综合可得 1001+1001+1001+1002+100*2=700px。
于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px
最后A、B、C、D、E的实际宽度分别为：
A: 120-14=106px,
B: 120-14=106px,
C: 120-14=106px,
D: 120-28=92px,
D: 120-28=92px，
此外，这个宽度是包含边框的。
