uniapp中flex布局gap属性兼容处理

使用场景:

flex布局中的gap属性对于旧版本机型存在不适配问题

解决方案:
1.新建minins.scss

javascript 复制代码
/* mixins.scss */
@mixin flexGap($size, $direction) {
  @if $direction == column {
    & > * {
      margin-bottom: $size;
    }
    & > *:last-child {
      margin-bottom: 0;
    }
  } @else {
    & > * {
      margin-right: $size;
    }
    & > *:last-child {
      margin-right: 0;
    }
  }
}

/* mixins.scss */

2.uni.scss中引入minins.scss

javascript 复制代码
@import './common/mixins.scss';
相关推荐
Geek_Vison9 小时前
2026 跨端框架横评:FinClip、Taro、uni-app、Remax、mPaaS 五款工具技术+业务双维度测评
小程序·uni-app·taro·mpaas·小程序容器
RuoyiOffice12 小时前
从 0 到 1 搭建 RuoyiOffice:30 分钟跑通后端+前端+移动端
前端·spring boot·uni-app·开源·oa·ruoyioffice·hrm
Geek_Vison13 小时前
APP集成了50多个小程序后,如何搭建一个小程序管理平台来管理这些小程序~
小程序·uni-app·apache·mpaas·小程序容器
梦曦i1 天前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app
梦曦i1 天前
全面解析uni-router v1.2.0功能
前端·uni-app
不如摸鱼去1 天前
Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级
ui·小程序·uni-app
PedroQue991 天前
uni-router:uni-app路由管理新选择
前端·uni-app
这是个栗子1 天前
微信小程序开发(九)- uni-app微信小程序商城
微信小程序·小程序·uni-app·vue·vuex
中犇科技2 天前
2026商城APP开发公司 TOP5(电商垂直版)
uni-app
扁豆的主人2 天前
Uniapp如何构建和部署
uni-app