flex换行不生效因flex-wrap默认nowrap，需父容器显式设wrap；text换行需white-space:normal；标签云用flex-wrap+gap/margin；多端差异需按平台适配写法并真机调试验证。
uni-app里用flex做流式布局为什么换行不生效
因为flex-wrap默认是nowrap，哪怕写了display: flex，子项也会强行挤在一行。uni-app的view组件本身不带换行逻辑，得靠CSS显式控制。
- 必须给父容器加
flex-wrap: wrap，不能只靠flex-direction: row - 子项别设固定
width（比如width: 100px），否则可能因像素对齐问题卡住换行；推荐用flex: 1或min-width - uni-app在微信小程序端对
flex-basis支持不稳定，慎用flex: 0 0 auto这类写法 - 真机调试时，iOS和Android对
gap属性支持不一致，建议用margin代替gap
uni-app中text标签内容自动换行失效怎么办
text组件默认white-space: nowrap，中文、英文、数字混排时特别容易溢出容器。这不是bug，是设计如此——它本就不是用来装大段文字的。
- 换行必须手动加
white-space: normal或word-break: break-word - 如果内容来自接口且含换行符
\n，得配合decodeURIComponent或正则替换，再用rich-text渲染，text原生不解析\n - 在H5端可用
overflow-wrap: break-word，但App端需额外加hyphens: auto才更可靠 - 避免给
text设flex-shrink: 0，否则会撑开父容器导致布局错乱
uni-app实现“标签云”式自动排列（类似微博话题）
这种场景本质是弹性盒子+内容自适应宽度，不是靠JS计算位置。关键在让每个标签“知道自己该占多宽”，同时允许整体流式换行。
- 父容器用
display: flex; flex-wrap: wrap; gap: 8px;（H5/小程序基础版可改用margin模拟gap） - 每个标签用
view包裹，设padding: 4px 12px+border-radius: 4px，不设width - 为防极端长文本撑破行，加
max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 若需点击反馈，别直接给
view加hover-class（小程序不支持伪类），改用class动态切换
uni-app中flex流式布局在不同平台表现不一致的坑
不是代码写错了，是各端渲染引擎对Flex规范的支持粒度不同。最常出问题的是微信小程序基础库版本、App的weex内核、以及H5的浏览器兼容性。
- 微信小程序低于2.27.0的基础库不支持
flex: 1 1 auto中的auto，统一写成flex: 1更稳妥 - App端（尤其是iOS）对
min-height在flex子项中经常失效，改用height或padding撑高 - H5端若用
vw/vh单位做flex子项尺寸，在某些安卓WebView里会四舍五入失真，建议统一转为rpx或px - 所有flex相关样式，务必在
style里写内联（而非class），避免小程序端样式隔离导致未生效
流式布局真正的难点不在写法，而在验证——必须在微信、支付宝、App、H5四个环境逐个点开调试器看computed style，光看预览图没用。
