<view style="background-color: black; height: 100rpx; flex-direction: row;">
<view style="width: 50%; background-color: red; height: 100px;"></view>
</view>
objcat
- 发布：2020-06-04 12:12
- 更新：2024-10-24 15:28
- 阅读：4484
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15.4
HBuilderX类型： 正式
HBuilderX版本号： 2.7.9
手机系统： iOS
手机系统版本号： iOS 13.4
手机厂商： 苹果
手机机型： 6s
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
使用百分比来设置item宽度
使用百分比来设置item宽度
预期结果：
百分比生效
百分比生效
实际结果：
百分比不生效
百分比不生效
bug描述：
nvue无法使用百分比, 虽然官方已声明出来不能使用百分比了, 但是我还是要说, 这确确实实是一个关键功能缺失性的bug, 如果连方便设置屏幕等分样式都做不到还算什么flex, 而且h5端是支持的, app端不支持, 这就导致了需要设置两种样式, 十分麻烦, 所以在这里建议
-
官方加入百分比支持
-
或者是给出变量方便布局
-
或是你已经有了更好的办法来解决此类问题, 请在文档中给出, 这样可以帮助开发者十分方便的进行开发
那么这里就列出目前一个无法实现的需求
如果只使用一个flex父模型进行布局, 注意我强调的是一个父模型使用设置wrap的模式进行布局, 是无法实现两排八个等分的, 就是因为不支持百分比, 如果你能实现请推翻我, 如果有需要帮助的地方也可以联系我
objcat (作者)
破案了 nvue沿用了weex的布局方案 就是屏幕宽度给弄成比例了 750rpx就是百分之百 所以四等分就是187.5rpx 然后设置wrap就可以支持两排等分了 很多开发者都不知道 所以我在这里说一下
-
-
-
-
没啥用，我一个列表横向排列，当横向排列不了的时候排第二排，一个item占据25%的宽度。本想着750rpx / 4，结果他妈的H5没问题，苹果没问题，安卓直接在第四个item跑到了第二排去了
2022-06-04 11:31
-
凌风浮云S - 一个前端的小白，将来会变大佬的！
它的官方文档里说了，不能使用百分比，但没只有这个布局确实做起来鸡肋
-
-
-
-
回复 DCloud_uni-ad_HDX: flex:1可以做出100%的效果，但实际约束很多，不可以有其他使用父元素空间的子元素，并且其他百分比的值做不到，你给我做一个75%的高度看看
2022-05-06 21:08
![[已删除]](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/43/24/37_avatar_mid.jpg?v=0){kind=avatar}
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序
这也不能算是问题，文档都写了不支持百分比
