卡片布局自适应方案全解析 |
您所在的位置：网站首页 › 卡片框架绘画 › 卡片布局自适应方案全解析 |
卡片布局自适应方案全解析
|
上设计稿
采用卡片模式，设计师给出的完美设计稿是 显示一行5个卡片，收起左侧菜单与否都展示5个 但是有点经验的前端就知道 这个需求没设计师给的这么简单（虽说后面改的时候也针对于自适应的方案纠结了一天的工期😊） 看到这个需求首先我们第一想到的肯定是自适应的王者：flex 1.卡片自适应 —— flex Dom + card 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; }然后写出了这样的效果
看出问题了吗？ 最右侧在card填充不完全的时候，出了一大块空缺，正常审美都忍不了啊！ 简单，搞一个justify-content center/space-around/space-between/space-evenly 这么多属性，总有一个能解决问题 center .card-wrap { /*变更*/ justify-content: center; }
这就没有一个长得和设计稿像的啊？？？ 诶？是不是我的max-length有问题？固定宽了，让宽度自适应呢？ 去掉max-length的效果
妙，说干就干 因为我有收起展开，本来就有写resize的方法，直接在resize里写计算就好了。 2.卡片自适应Max —— flex + 空白card填充 DOM + card CSS .card-wrap { display: flex; flex-wrap: wrap; justify-content: start; } .card-context { flex: 1; width: 300px; min-width: 300px; height: 100px; margin: 10px; border: solid 3px pink; } .card-context.no-border { border: none; } JS function resize() { // 以card父元素的宽为参考 const dom = this.$refs.cardListWrap; let domWidth = dom.offsetWidth; // 最少2列 let columnNo = 2; if (domWidth >= 1020 && domWidth = 1340 && domWidth = 1660) { // 最多5列 columnNo = 5; } // 分页器有选择一页多少个的配置 // 新增card的块 // totalBlock是关于这部分的计算，计算当前页总共有几个card const totalBlock = this.page.currentPage === 1 ? this.data.length + 1 : this.data.length; // lastRowBlankColumn是计算最后一行需要补几个空白块 this.lastRowBlankColumn = totalBlock % columnNo > 0 ? columnNo - (totalBlock % columnNo) : 0; }, 效果card 宽度自适应屏幕，用min-width去约束card，屏幕会尽量排多个。拉伸card的width填充。且最后一行也会正常的card显示。
做的这么完美的适配方案，我去和产品&设计小姐姐们验收，然后她们说：丑？？？ 她们不希望card的宽度变更！！！ 我？？？大费周章？？？ 最后变更 .card-wrap { /* 变更 */ justify-content: center; } .card-context { /* 新增 */ max-width: 300px; }不，我不屈服，我觉得flex不可能容忍我需要加js才能解决这么简单的问题 果真我在知乎看到一篇《如何实现同等间隙的卡片布局》的文章中找到了解决方案：flex-grow 3.卡片自适应Max Pro —— flex-grow .card-wrap:after { /* 新增 */ content: ""; display: block; flex-grow: 99999; }删除原有空白div的逻辑和相关在resize的代码，实现的简简单单。 当然这个只限制在固定card宽的模式下 如果不固定card宽度，这个方案不生效。 4.卡片自适应Pro —— grid其实中间还去尝试了grid布局，grid布局轻轻松松几行css就能解决最后一行缺失空白的问题，但是因为兼容性的问题没有采用。 具体可以查看阮老师的《CSS Grid 网格布局教程》 这个故事告诉我：有空要好好研究一下flex布局的奇技淫巧 如果大家有更好的方式，一定要在评论里留言赐教呀～ |
最后一行感觉怎么回事？！ 这个完全不大行啊～ 心头一紧，赶紧去查了下网上对于card自适应的解决方案。 然后看到了某大佬css计算宽度的复杂方案。加减的多了，我一头雾水。 去了一趟厕所回来的茅塞顿开 最后一行缺几个，那我补几个空div撑开啊。
【本文地址】