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://www.toymoban.com/news/detail-598020.html
文章来源：https://www.toymoban.com/news/detail-598020.html
到了这里，关于vue实现左右布局(右侧超出的时候换行展示)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
