flex+js实现内部盒子高度跟随其中最大的高度

最新推荐文章于 2024-06-12 23:25:43 发布

一条大河全靠浪

最新推荐文章于 2024-06-12 23:25:43 发布

阅读量1.5k

点赞数 1

分类专栏：前端样式文章标签： javascript flex布局

本文链接：https://blog.csdn.net/HYeeee/article/details/122412989

版权

前端样式专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果

1、所有内部的小卡片都是一行，超出加横向滚动条；
2、每个卡片的高度都跟随内部最高的那个卡片高度：
在这里插入图片描述

实现

1、首先整个包裹卡片的父级框框，他高度一定是跟随内部最大卡片高度。这里动态设置的height，是为了flex布局，要满足上述样式，flex必须要父级有一个高度，不能为auto

  <div class="ind-type-group" ref="group" :style="{height: groupHeight}">
  	<!-- 多个卡片 -->
  	<ind-type-card class="type"></ind-type-card>
    <ind-type-card class="type"></ind-type-card>
    ...
  </div>

2、 flex样式（gap慎用，浏览器兼容性不好）

.ind-type-group {
  display: flex;
  align-items: stretch; // 内部卡片高度拉伸
  width: 100%;
  overflow: auto;
  padding-bottom: 20px;

  .type {
    flex: 1;
    min-width: 400px;
    max-width: calc((100% - 40px)/3);
  }
  .type + .type {
    margin-left: $gap4x;
  }
}

// 卡片样式
.ind-type-card {
  height: 100%;
  width: 100%;
}

3、通过js动态设置父级高度

data() {
  return {
    groupHeight: 'auto',  // 初始设置auto
  }
},

mounted() {
  this.getAllTypes()
  window.addEventListener('resize', this.setHeight)
},
beforeDestroy() {
  window.removeEventListener('resize', this.setHeight)
},

methods: {
 // 高度不固定，所有项依据最高的来
 setHeight() {
   this.groupHeight = 'auto'
   this.$nextTick(() => {
   	 // 动态获取父级高度，并设置height， 这个设置主要是给flex的stretch设置高度参考
     this.groupHeight = this.$refs.group.clientHeight + 'px'
   })
 },
}