flex-wrap: wrap 在手机上没生效的主因是仅设 display: flex 而漏写 flex-wrap，且子项不可收缩（如长单词、未设 max-width 的图片、min-width 过大等），需同时设置 flex-wrap: wrap、min-width: 0、word-break: break-word 及 max-width: 100% 等协同生效。

flex-wrap: wrap 为什么在手机上没生效？ 常见错误是只写了 display: flex，却漏掉 flex-wrap。Flex 默认值是 nowrap，哪怕屏幕只剩 200px 宽，子项也会强行横排溢出。必须显式设为 wrap 或 wrap-reverse。

• 确保父容器有 flex-wrap: wrap，不能只靠 display: flex
• 不要依赖媒体查询“等窄了再加”，直接默认开启换行更稳妥
• 如果子项用了 min-width: 0 或 overflow: hidden，可能压制换行逻辑，先检查是否意外截断了弹性行为

子项不收缩导致换行失败的典型场景 即使开了 flex-wrap: wrap，如果某个子项内容是长单词、URL 或未设 max-width 的图片，它会拒绝压缩，把整行撑开，结果还是单行溢出。

• 给子项加 min-width: 0（对文字类内容特别关键）
• 长文本容器补上 word-break: break-word 或 overflow-wrap: break-word
• 图片统一加 max-width: 100% 和 height: auto，避免固有尺寸卡死布局

flex-basis 设为 0% 后换行依然错乱？ 很多人用 flex: 1 1 0% 想让子项均分并换行，但实际中常出现第一行塞不满就折行、或最后一行只剩一个元素孤零零的情况。

• flex-basis: 0% 是合理的，但需配合 min-width 控制最小占位（比如 min-width: 200px）
• 更稳的做法是用 flex: 1 1 min-content + min-width，避免基线被空内容拉偏
• 注意：Safari 对 flex-basis: 0% 的解析偶尔有偏差，建议改用 flex-basis: 0px 兼容性更好

极窄屏下按钮/标签堆叠难看怎么办？ 当宽度压到 320px 甚至更小，flex-wrap 虽然能换行，但按钮、tag 类组件可能因内边距/字体大小显得臃肿拥挤。

• 用 @media (max-width: 320px) 单独调小 padding 和 font-size
• 子项加 flex-shrink: 1，确保它真能被压缩（某些框架默认关掉这个）
• 避免给子项设固定 width，否则 flex-wrap 失效；用 max-width 替代

事情说清了就结束。最常被忽略的是：换行不是靠“足够窄”自动触发的，而是靠 flex-wrap + 可收缩的子项共同作用；缺一不可。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载