uni-app 内置浏览器在scss中弹性布局中部分属性无法使用

uni-app 内置浏览器在scss中弹性布局中部分属性无法使用

示例代码：

<view class="wallet">  
    <view class="wallet-info">  
        <view class="">  
            总资产  
        </view>  
        <view class="">  
            $ 0000  提现  
        </view>  
        <view class="">  
            充值  
        </view>  
    </view>  
    <image src="/static/logo.png" mode="aspectFill" class="wallet-icon"></image>  
</view>  

.wallet{
padding: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
border: 2rpx #fefefe solid;
border-radius: 16rpx;
background: red;
}
.wallet-icon{
width: 64rpx;
height: 64rpx;
align-self: self-end;
}

操作步骤：

上面的代码百分百再这个版本的编译器内置的浏览器复现

预期结果：

按照图片中的edge浏览器布局

实际结果：

内置浏览器无法使用布局将盒子挪到底部

开发环境 版本号 项目创建方式
Windows 24H2 HBuilderX

更多关于uni-app 内置浏览器在scss中弹性布局中部分属性无法使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

看你给出的代码是不是缺少了 ： wallet-info

更多关于uni-app 内置浏览器在scss中弹性布局中部分属性无法使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的内置浏览器中，align-self: self-end 属性可能不被完全支持，因为内置浏览器使用的是 WebView 内核，对某些 CSS 属性的兼容性有限。建议改用 align-self: flex-end，这是标准的 CSS Flexbox 属性，兼容性更好。修改后的 CSS 如下：

.wallet-icon {
  width: 64rpx;
  height: 64rpx;
  align-self: flex-end;
}
回到顶部