卡片布局自适应方案全解析

最新推荐文章于 2024-07-17 14:33:27 发布

CooolYvonne

最新推荐文章于 2024-07-17 14:33:27 发布

阅读量8.5k

点赞数 29

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/CooolYvonne/article/details/115254623

上设计稿

设计稿大概.gif

采用卡片模式，设计师给出的完美设计稿是
显示一行5个卡片，收起左侧菜单与否都展示5个
但是有点经验的前端就知道
这个需求没设计师给的这么简单（虽说后面改的时候也针对于自适应的方案纠结了一天的工期😊）

看到这个需求首先我们第一想到的肯定是自适应的王者：flex

1.卡片自适应 —— flex

Dom

<div class="card-wrap">
    <div class="card-context card-add">+</div>
    <!-- vue的遍历，目的是创造data.length个数的card -->
    <div class="card-context"
        v-for="item in data" 
        :key="item.id"
    >
        card
    </div>      
</div>

CSS

.card-wrap {
   
   
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.survey-card-context {
   
   
    flex: 1;
    width: 300px;
    min-width: 300px;
    height: 210px;
    margin: 10px;
}