vue实现左右布局(右侧超出的时候换行展示)

目录

vue实现左右布局(右侧超出的时候换行展示)

code

js 复制代码
      <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;
      }
    }
  }

效果

相关推荐
LucianaiB7 分钟前
拿到Offer,租房怎么办?看我用高德MCP+腾讯云MCP,帮你分分钟搞定!
前端·后端·cursor
用户175923421502813 分钟前
D3.js - 基本用法
前端·d3.js
Mr.Liu629 分钟前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
76756047930 分钟前
useDateFormat源码解析
前端·源码
Mintopia30 分钟前
Three.js粒子系统开发实战:从基础到性能优化
前端·javascript·three.js
Promise52031 分钟前
大屏"跑马灯" 长列表性能优化
前端·javascript
子玖31 分钟前
初始化项目前的准备
前端·javascript·vue.js
Mintopia31 分钟前
Three.js进阶实战:打造动态光影交互场景 ——结合环境光、聚光灯与相机控制的沉浸式体验
前端·javascript·three.js
贵州数擎科技有限公司32 分钟前
Threejs绘制小兩伞快拿去送给你的女神
前端
Carlos_sam34 分钟前
OpenLayers:封装Overlay的方法
前端·javascript