flex:1在移动端失效的根本原因是未控制子项收缩底线和内容溢出行为；必须配合min-width:0、word-break:break-word及flex-wrap:wrap三规则才能实现稳定等比分栏。
移动端用 Flexbox 做等比自适应分栏，关键不是写 flex: 1 就完事——得防住文字溢出、撑破容器、小屏错位这三类真实问题。
为什么 flex: 1 在移动端经常失效
很多人直接给每个栏目加 flex: 1，结果在 iPhone 上一测就发现：文字不换行、横向滚动条意外出现、甚至整行被挤掉。这不是 Flex 不行，而是没控住子项的收缩底线和内容溢出行为。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，它默认允许压缩，但若子项里有长 URL 或未断行中文，浏览器宁可拉宽容器也不折行 - 移动端视口窄，
flex-basis: 0%会让初始宽度归零，再靠flex-grow拉伸——此时若没设min-width: 0，主轴会拒绝收缩，导致布局“卡死” - 没有
word-break或overflow-wrap配合，纯靠 Flex 无法干预内联内容的换行逻辑
flex: 1 必须搭配的三个防御性 CSS 规则
要让等比分栏真正在各种手机上稳住，这三条必须同时存在：
- 给每个分栏项加
min-width: 0：解除 flex 项最小宽度限制，允许它在窄屏下真正收缩 - 给分栏内容容器（比如
.item-content）加word-break: break-word或overflow-wrap: break-word：强制长文本换行 - 父容器设
display: flex+flex-wrap: wrap（即使只有一行）：避免某些 Android 浏览器对单行 flex 的渲染异常
示例结构：
.grid-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.grid-item {
flex: 1;
min-width: 0; /* 关键 */
}
.grid-item > * {
word-break: break-word;
}
等比分栏在小屏下的实际断点处理
所谓“等比”，在移动端往往不是永远保持 3 列或 4 列——而是按视口宽度动态调整列数。硬写 @media (max-width: 768px) 一刀切，容易在 iPad Mini 或折叠屏上出问题。
- 推荐用
minmax(280px, 1fr)+auto-fit的 Grid 替代 Flex 做列数自适应，但如果你坚持用 Flex，可用 JS 检测window.innerWidth后切换 class，或者用更细粒度的媒体查询：@media (max-width: 480px)（iPhone SE）、@media (max-width: 600px)（主流安卓小屏） - 如果必须纯 CSS，可对不同数量的子项做针对性处理，比如 3 个子项时用
flex: 1 1 33.333%，2 个时用flex: 1 1 50%，但需配合flex-wrap: wrap和足够gap防重叠 - 注意：Safari iOS 15.4 之前版本对
flex-basis: 0%有渲染 bug，若需兼容老设备，改用flex-basis: 1px更稳妥
Flex 等比分栏 vs Grid 的取舍点
别迷信 Flex 万能。当你需要真正“等比”且响应式列数变化频繁时，Grid 的 auto-fit + minmax() 是更干净的解法；Flex 更适合固定列数（如始终双栏）或语义上明确主次（如左导航右内容）的场景。
- Flex 优势：DOM 顺序即阅读顺序，SEO 友好；
order可局部调序；兼容性更好（IE11+） - Flex 劣势：无法跨行对齐、不能定义隐式网格线、列数动态变化需额外 class 控制
- 一个容易被忽略的细节：Flex 的
gap在 Safari iOS 14.5 以下不支持，得用margin模拟，而 Grid 的gap支持从 iOS 10.3 就开始稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
