解决flex gap兼容性问题

前言

一个项目写下来，在网页端预览的时候正常，结果到产品经理手上。

设计稿样式

实际产品手机上样式

产品：“你这玩意儿怎么没间距？”

我：“为什么我的正常？？？呐呐呐你看我手机（来自RedmeK50Utral）”

产品：“哦，你看我的手机（来自荣耀20）”

我：“。。。”

至此我看了看我代码中的一堆gap，再看了看她那还不退休的老安卓，陷入了沉思！

解决办法

我的想法就是通过子元素设置右边和下边的间距，父元素设置同等值的，同方向的负magin值来实现gap同样的效果。

// xxxx.scss .xxxxActions { display: flex; margin-right:-12px; margin-bottom:-12px; .xxxaa { margin-right:12px; margin-bottom:12px; } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

你以为这样就结束了吗？漏！并不是这样的。每个文件中都这么写不累吗？作为一个懒鬼，我是非常不屑于这么写，不够优雅。

sass mixin用法

写过vue2的肯定都知道，mixin是个什么东西，sass同理

某观众：“这这这我熟啊！”

mixin简单来说，就是把一些共用的东西，给塞进来，mixin的英文翻译过来是混入的意思。就好比你是奶茶店的员工，你在做奶茶，每杯奶茶都需要加糖吧！但其他东西都不一样，这时候就可以把果糖封装起来，然后mixin混入一下，混到奶茶里，这杯奶茶就成了。是不是非常好理解

封装mixin

@mixin gap($size) { margin-bottom: calc(0px - $size); margin-right: calc(0px - $size); & > * { margin-right: $size; margin-bottom: $size; } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

使用mixin

这里以vue cli5+webpack5实例，其他同理。uniapp中直接在uni.scss中写mixin，不需要多余配置

第一步：在vue.config.js中配置，webpack4把additionalData换成data就行

module.exports = defineConfig({ css: { loaderOptions: { sass: { additionalData: ` @import "@/assets/css/mixin.scss"; ` } }, }, })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

这一步的配置作用是自动在每个scss文件中引入mixin.scss，这样才能访问到mixin函数

第二步：使用

.basicBottomActions { display: flex; @include gap(10px); }

• 1
• 2
• 3
• 4

总结

以上就达到了gap同样的效果，并且保持了良好的兼容性。妈妈再也不怕兼容性不好的手机用不了gap啦！总之不管用的什么打包工具，vite也要webpack也好，原理是一样的。