vue实现左右布局(右侧超出的时候换行展示)
code
<ul class="body-detail">
<li>
<div class="li-label">姓名</div>
<div class="li-value">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</li>
<li>
<div class="li-label">身份证号码</div>
<div class="li-value">XXXXXXXX</div>
</li>
</ul>
.body-detail {
li {
display: flex;
flex-flow:wrap;
line-height: 30px;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
.li-label {
width: 80px;
color: #323233;
flex: 0 0 auto;
}
.li-value {
width: calc(100% - 80px);
color: #7E8299;
flex: 1 1 auto;
word-wrap: break-word;
}
}
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4e83415ade7c12aa353a789fbfc02020.png)