Hbuilder更新到3.4.14版本后页面的flex布局部分失效页面样式错乱

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号：未知

HBuilderX类型：正式

HBuilderX版本号： 3.4.14

手机系统：全部

手机系统版本号： Android 12

手机厂商：小米

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

测试过的手机：

红米K40 k30s iphonex

示例代码：

    .content {  
        padding: 0 32rpx;  
        text-align: left;  
        display: inline-block;  
        word-wrap: break-word;  
        word-break: break-all;  
        white-space: normal;  
        .topcss{  
            background: blue;  
            width: 100%;  
            display: flex;  
            align-items: flex-end;  
            justify-content: space-between;  
            .title {  
                background: red;  
               width: 300rpx;  
                overflow: hidden;  
                text-overflow: ellipsis;  
                white-space: nowrap;  
                   height: 52rpx;  
                   font-size: 32rpx;  
                   font-weight: bold;  
                   color: #333333;  
                line-height: 52rpx;  
               }  
               .time {  
                   background: green;  
                height: 52rpx;  
                width: calc(100% - 200rpx);  
                display: flex;  
                align-items: center;  
                justify-content: flex-end;  
                   font-size: 22rpx;  
                   color: #AAAAAA;  
               }  
        }  
        .item {  
            width: 400rpx;  
            overflow: hidden;  
            text-overflow: ellipsis;  
            white-space: nowrap;  
            height: 52rpx;  
            font-size: 28rpx;  
            color: #333333;  
            line-height: 52rpx;  
        }  
    }

操作步骤：

    .content {  
        padding: 0 32rpx;  
        text-align: left;  
        display: inline-block;  
        word-wrap: break-word;  
        word-break: break-all;  
        white-space: normal;  
        .topcss{  
            background: blue;  
            width: 100%;  
            display: flex;  
            align-items: flex-end;  
            justify-content: space-between;  
            .title {  
                background: red;  
               width: 300rpx;  
                overflow: hidden;  
                text-overflow: ellipsis;  
                white-space: nowrap;  
                   height: 52rpx;  
                   font-size: 32rpx;  
                   font-weight: bold;  
                   color: #333333;  
                line-height: 52rpx;  
               }  
               .time {  
                   background: green;  
                height: 52rpx;  
                width: calc(100% - 200rpx);  
                display: flex;  
                align-items: center;  
                justify-content: flex-end;  
                   font-size: 22rpx;  
                   color: #AAAAAA;  
               }  
        }  
        .item {  
            width: 400rpx;  
            overflow: hidden;  
            text-overflow: ellipsis;  
            white-space: nowrap;  
            height: 52rpx;  
            font-size: 28rpx;  
            color: #333333;  
            line-height: 52rpx;  
        }  
    }

预期结果：

红色和绿色在同一行

实际结果：

红色盒子和绿色盒子换行

bug描述：

Hbuilder更新到3.4.14版本后页面的flex布局部分失效页面样式错乱

2022-06-08 15:00 负责人:无分享

12 个回复

DCloud_UNI_GSQ

来了

DCloud_UNI_GSQ

已确认scoped style出现兼容问题，即将修复。

3***@qq.com

应该下面这个样式搞的，flex布局得设置direction为row，flex-shrink也得重新设值
···
uni-view[data-v-4a02ae53], uni-scroll-view[data-v-4a02ae53], uni-swiper-item[data-v-4a02ae53] {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}
···

fucking (作者)

红色的盒子和绿色的应该在同一行的，而且我用更新之前的版本是正常的，更新后才出现这个问题

2022-06-08 15:15
3***@qq.com

回复 9***@qq.com: 我也发了个贴，也是样式的问题，论坛里关于样式的问题还挺多。应该是编译插件导致的，插件市场没法自行下载，只能等官方搞了。

2022-06-08 15:36