使用uniapp开发app时 css gap在部分机型不生效

使用uniapp开发app打完包以后发现gap在部分安卓和ios机型上不生效。

解决办法：使用margin代替gap。

举个例子

.p{
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}
// 等同于
.p{
	display: flex;
	flex-direction: row;
	
}
.p .c{
	margin-right: 20rpx;
}
.p .c:last-child{
	margin-right: 0;
}

但是往往有同学都是第一次使用uniapp开发app， 测试不严谨的可能开发过半才发现这个问题，这时候需要怎么解决呢？可以使用@mixin来集中管理使用gap属性的元素，再举个例子

@mixin flexgap($size,$direction) {

	//  $size 元素间的间隔
	//  $direction 判断felx布局是row还是column

	@if $direction == column{

		& > * {
			margin-bottom: $size;
		}
       // 选中最后一个子元素并去掉该元素的margin
		& > *:last-child{
			margin-bottom: 0;
		}

	}@else{

		& > * {
			margin-right: $size;
		}

		& > *:last-child{
			margin-right: 0;
		}
	}

}

注意这个方法要写在scss文件中，使用的时候这样写 @include flexgap(间距,方向);