uni-app怎么做响应式网格布局 uni-app多端自适应行列展示【实战】-uni-app-PHP中文网

uni-app中flex网格在小程序错位因微信小程序flex-wrap对view支持不全，需显式设width:100%、用flex:0 0 33.33%替代width百分比，并加min-width:0；grid布局小程序完全不支持；多端响应式推荐动态计算rpx列宽并预留2rpx容错。

uni-app怎么做响应式网格布局 uni-app多端自适应行列展示【实战】

因为微信小程序的flex-wrap对view容器支持不完整，尤其在uni-app编译成小程序时，若父容器没设width或用了%单位但未限定上下文宽度，子项会塌缩或换行失效。

必须给网格容器（如view）显式设置width: 100%，不能只靠flex: 1
避免在flex-direction: row下对子项用width: 33.33%——小程序里calc()和小数百分比渲染有误差，改用flex: 0 0 33.33%
安卓微信开发者工具中flex-wrap: wrap偶尔不触发，加min-width: 0到子项可稳定换行

不能直接用display: grid——H5端支持，但微信/支付宝/头条小程序完全不支持grid，uni-app也不会做降级转换。强行写只会让小程序白屏或布局乱掉。

靠media query + flex组合最稳，但要注意uni-app的px单位在各端逻辑像素不一致，优先用rpx或vw。

用@media (max-width: 768px)切两列，@media (max-width: 480px)切一列——但H5有效，小程序无效
真·多端生效的做法：用uni.getSystemInfoSync().screenWidth动态算列数，再绑定class或style
示例：:style="{ 'flex-basis': columnWidth + 'rpx' }"，其中columnWidth根据屏幕宽动态赋值（如750rpx屏三列→250rpx，500rpx屏两列→250rpx）

不推荐。官方uni-ui里的uni-row/uni-col本质还是flex实现，但封装层叠了额外padding、margin和box-sizing逻辑，在App端和小程序端表现不一致，调试成本高。

它默认加了padding: 0 10rpx，导致实际内容宽度不可控
offset属性在小程序里经常失效，因transform未被正确透传
真正轻量可控的做法：自己写.row { display: flex; flex-wrap: wrap; } + .col-4 { flex: 0 0 33.33%; }，然后按需加class

最麻烦的不是写法，而是rpx在不同设备DPR下换算精度丢失，比如iPhone 14 Pro Max的1rpx = 0.5px，但某些安卓机是1rpx ≈ 0.333px，所以列宽用rpx算出来差1px就可能触发换行——这点容易被忽略，得留出至少2rpx容错间隙。