flex布局,列表模块,中间区域文字超出省略
<div class="box">
<div class="left-container">
<img width=100 height=100 :src="xxxxxxx">
</div>
<div class="center-container">
<div class="title">标题</div>
<div class="des">描述</div>
<div class="tip flex">
标签
</div>
</div>
<div class="right-container">
<div class="rigth-1"></div>
<div class="rigth-2"></div>
<div class="rigth-3"></div>
</div>
</div>
.flex {
display: flex;
}
.left-container {
width: 162px;
height: 162px;
background-color: #666;
border-radius: 8px;
flex-shrink: 0;
overflow: hidden;
}
.center-container {
flex: 1;
width: 0;
height: 100%;
color: #5C6373;
margin-left: 12px;
.title {
.font(32);
color: #11141A;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.des,
.tip {
font-size: 12px;
}
.tip {
align-items: center;
}
}
.right-container {
display: flex;
flex-direction: column;
margin-left: auto;
align-items: flex-end;
justify-content: space-between;
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6ee3e1a82e2f99b48e50c2bdbc8307c3.png)