vue 实现自适应布局

原创已于 2025-03-31 16:29:54 修改 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #vue

于 2025-03-31 16:28:37 首次发布

vue实现BI看板自适应布局

对于自适应的方法有很多种，这里用纯css的方式，配合弹性布局

1、页面部分

<div class="page">
   <div class="auto-col">
     <!-- 第一行 -->
     <div class="static"> </div>
     <!-- 第二行 -->
     <div class="auto auto-row">
       <div class="auto"></div>
       <div class="auto"></div>
     </div>
     <!-- 第三行 -->
     <div class="auto auto-row">
       <div class="auto"></div>
       <div class="auto"></div>
       <div class="auto"></div>
     </div>
   </div>
</div>

2、css部分


$gutter: 10px;
.auto-col {
  flex-direction: column;
}
.auto-row {
  flex-direction: row;
}
.auto-row,
.auto-col {
  width: 100%;
  height: 100%;
  transform-origin: 0% 0%;
  display: flex;
  gap: $gutter;
  .static {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .auto {
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
  }
}