前言
一個項目寫下來，在網(wǎng)頁端預覽的時候正常，結(jié)果到產(chǎn)品經(jīng)理手上。
設計稿樣式
實際產(chǎn)品手機上樣式
產(chǎn)品：“你這玩意兒怎么沒間距？”
我：“為什么我的正常？？？吶吶吶你看我手機（來自RedmeK50Utral）”
產(chǎn)品：“哦，你看我的手機（來自榮耀20）”
我：“。。。”
至此我看了看我代碼中的一堆gap，再看了看她那還不退休的老安卓，陷入了沉思！
解決辦法
我的想法就是通過子元素設置右邊和下邊的間距，父元素設置同等值的，同方向的負magin值來實現(xiàn)gap同樣的效果。
// xxxx.scss
.xxxxActions {
display: flex;
margin-right:-12px;
margin-bottom:-12px;
.xxxaa {
margin-right:12px;
margin-bottom:12px;
}
}
你以為這樣就結(jié)束了嗎？漏！并不是這樣的。每個文件中都這么寫不累嗎？作為一個懶鬼，我是非常不屑于這么寫，不夠優(yōu)雅。
sass mixin用法
寫過vue2的肯定都知道，mixin是個什么東西，sass同理
某觀眾：“這這這我熟?。 ?/p>
mixin簡單來說，就是把一些共用的東西，給塞進來，mixin的英文翻譯過來是混入的意思。就好比你是奶茶店的員工，你在做奶茶，每杯奶茶都需要加糖吧！但其他東西都不一樣，這時候就可以把果糖封裝起來，然后mixin混入一下，混到奶茶里，這杯奶茶就成了。是不是非常好理解
封裝mixin
@mixin gap($size) {
margin-bottom: calc(0px - $size);
margin-right: calc(0px - $size);
& > * {
margin-right: $size;
margin-bottom: $size;
}
}
使用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";
`
}
},
},
})
這一步的配置作用是自動在每個scss文件中引入mixin.scss，這樣才能訪問到mixin函數(shù)
第二步：使用文章來源：http://www.zghlxwxcb.cn/news/detail-734265.html
.basicBottomActions {
display: flex;
@include gap(10px);
}
總結(jié)
以上就達到了gap同樣的效果，并且保持了良好的兼容性。媽媽再也不怕兼容性不好的手機用不了gap啦！總之不管用的什么打包工具，vite也要webpack也好，原理是一樣的。文章來源地址http://www.zghlxwxcb.cn/news/detail-734265.html
到了這里，關于解決flex gap兼容性問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
