小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如图所示，第一行方块为flex布局，第二行方块为absolute布局，方块宽度100，间距10，容器宽度都是660，使用rpx为布局单位的时候，两行的方块位置慢慢出现差异，黄线为一个参考线。单位全改成px，两行方块是完全对齐的。无论模拟器还是真机，iphone6P和iphone7P均有问题，安卓未测试
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
按照 rpx 的定义，在转成 px 的情况下，这里是可能存在偏差的。是会有长小数存在的，如 110rpx * 0.42 px/rpx 会等于 46.199999999999996px，而 flex 则是浏览器自动计算，不是 js 计算，所以不会有这个问题。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
现在出问题的是flex布局。。
看你的代码片段，出问题的应该是 absolute 而不是 flex 吧。
https://developers.weixin.qq.com/s/BcgjOtmd7r7o，已更改代码，如果flex布局的精度是准确的，那么6个红色的间隙应该等宽才对
不是，其实是你这里给了定宽，容器是 660 rpx，那么实际像素是 Math.floor(660 * 320 / 750) = 281 px。
而子项是 110 rpx，那么实际像素是 Math.floor(110 * 320 / 750) = 46px。而这里的偏移并不是像 absolute 那样由 js 计算指定，而是让浏览器自动计算，这样在 flex 布局里就不是均匀分配了，因为 46 * 6 = 276，而不是 281（其实就是小数被干掉导致的）。
你想达到你的效果，可以在 .child 上将 width: 100rpx 改成 flex: 1，让电脑自动计算就行。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
按照 rpx 的定义，在转成 px 的情况下，这里是可能存在偏差的。是会有长小数存在的，如 110rpx * 0.42 px/rpx 会等于 46.199999999999996px，而 flex 则是浏览器自动计算，不是 js 计算，所以不会有这个问题。
现在出问题的是flex布局。。
看你的代码片段，出问题的应该是 absolute 而不是 flex 吧。
https://developers.weixin.qq.com/s/BcgjOtmd7r7o，已更改代码，如果flex布局的精度是准确的，那么6个红色的间隙应该等宽才对
不是，其实是你这里给了定宽，容器是 660 rpx，那么实际像素是 Math.floor(660 * 320 / 750) = 281 px。
而子项是 110 rpx，那么实际像素是 Math.floor(110 * 320 / 750) = 46px。而这里的偏移并不是像 absolute 那样由 js 计算指定，而是让浏览器自动计算，这样在 flex 布局里就不是均匀分配了，因为 46 * 6 = 276，而不是 281（其实就是小数被干掉导致的）。
你想达到你的效果，可以在 .child 上将 width: 100rpx 改成 flex: 1，让电脑自动计算就行。