flex布局-CSDN博客

本文介绍了如何使用 Vue.js 的 flex 布局将`.indexStyle`元素分为三等份，同时展示了如何根据后端返回的数据动态渲染带有 tooltip 的案例信息，包括案号、法院号、法院名、身份证号和立案时间。

  <section>
          <div
            v-for="(item, index) in retrieveData"
            :key="index"
            class="boxStyle"
          >
            <div class="indexStyle">
              <label class="spanStyle">案号：</label>
                <el-tooltip
                class="item"
                effect="dark"
                :content="item.caseCode"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.caseCode }}</span>
              </el-tooltip>
              
            </div>
            <div class="indexStyle">
              <span class="spanStyle">法院号：</span
              >
               <el-tooltip
                class="item"
                effect="dark"
                :content="item.courtId"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.courtId }}</span>
              </el-tooltip>
         
            </div>
            <div class="indexStyle">
              <span class="spanStyle">法院名：</span
              >
               <el-tooltip
                class="item"
                effect="dark"
                :content="item.courtName"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.courtName }}</span>
              </el-tooltip>
        
            </div>
            <div class="indexStyle">
              <label class="spanStyle">身份证号：</label>
               <el-tooltip
                class="item"
                effect="dark"
                :content="item.identityNo"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.identityNo }}</span>
              </el-tooltip>
            
            </div>
            <div class="indexStyle">
              <label class="spanStyle">立案时间：</label
              > <el-tooltip
                class="item"
                effect="dark"
                :content="item.regDate"
                placement="top-start"
              >
                <span class="labelStyles">{{ item.regDate }}</span>
              </el-tooltip>
        </section>

这个案例里面,我们是根据后端返回给我们的数据,渲染出来的! 最大的父盒子是boxStyle!子盒子是indexStyle!
我们需要把indexStyle的盒子一行分成三个,平均分配!用flex的方法就是!

// 给父盒子启用flex属性,开启flex布局!
.boxStyle{
display: flex;//开启flex布局!也就是弹性盒子!
 justify-content: flex-start;//主轴内容左侧对齐!
 flex-wrap: wrap;//换行!
}
//给子盒子indexStyle设置宽度!
.indexStyle{
width: 33.33%;//必须给子盒子设置高度,不然会挤在一行里面!
}