移动端商城首页弹性多列布局需用flex-direction: column作外层结构，多列区块用display: flex; flex-wrap: wrap配合flex-basis控制列宽，并禁用height: 100%硬约束。
移动端商城首页用 Flexbox 实现弹性多列布局，关键不是“能不能”，而是“怎么避免高度错乱、换行失控、内容截断”。直接上结论：必须用 flex-direction: column 做外层主结构，多列区块用 display: flex; flex-wrap: wrap 配合 flex-basis 控制列宽，同时禁用 height: 100% 类硬约束。
为什么不能直接对整个首页设 display: flex; flex-direction: row
移动端屏幕窄，强行水平铺开多列会导致内容被压缩、文字换行异常、图片变形。更严重的是，justify-content: space-between 在小屏下会把列间距撑得过大，留白失控。实际项目中，首页是垂直滚动流（banner → 分类 → 商品列表 → 推荐），不是横向平铺——所以主容器必须是 column，否则语义和交互都反直觉。
flex-wrap: wrap + flex-basis 控制多列数量与宽度
商品卡片或分类图标这类“多列”区域，常见需求是：小屏 2 列、中屏 3 列、大屏 4 列。靠媒体查询反复改 width 太累，用 Flexbox 更稳：
- 父容器设
display: flex; flex-wrap: wrap;，子项不设width，只设flex-basis: 50%（小屏 2 列） - 用媒体查询覆盖：
@media (min-width: 768px) { .grid { --col: 33.33%; } }，再通过flex-basis: var(--col)切换 - 务必加
flex-shrink: 0，否则内容多的卡片会被压缩变形 - 避免用
justify-content: space-around，它在最后一行不满时会导致列间距不均；改用gap: 8px（现代浏览器支持好，iOS 14.5+ 安全）
等高问题：别碰 height: 100%，用 align-items: stretch 默认行为
商品卡片常含标题、价格、标签，高度天然不一致。很多人第一反应是给子项加 height: 100% 强拉，结果反而失效——因为 Flex 子项的 height 在 flex-direction: row 下不作用于交叉轴（即高度方向）。
- 正确做法：父容器保持
display: flex，子项不设height，依赖默认的align-items: stretch - 如果卡片内有浮动或绝对定位元素，会破坏 stretch 行为，需统一用 Flex 或 Grid 内部重构
- 需要底部按钮对齐？在卡片内嵌一层
display: flex; flex-direction: column;，再用margin-top: auto推按钮到底部
兼容性兜底与真机易踩坑点
iOS Safari 14.5 以下、Android WebView 旧内核对 gap 支持差，且 flex-basis 在百分比场景下容易因父容器 padding 计算出错。
- 兜底方案：用
margin-right模拟列间距，配合:nth-child(2n)清除末尾 margin - 真机调试发现卡片高度忽高忽低？检查是否用了
font-size: 1rem但未设html { font-size: 16px }，导致 rem 计算漂移 - 微信内置浏览器（X5 内核）对
flex: 1解析不稳定，建议拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 所有图片必须带
height: auto; max-width: 100%，否则 Flex 容器无法正确测量高度
最常被忽略的其实是“列数切换时机”——不要等视口宽度刚好卡在 768px 才切 3 列，用户横屏时宽度突变，布局会闪一下。用 min-width + max-width 区间定义更稳妥，比如 @media (min-width: 480px) and (max-width: 767px) 明确锁定 2 列区间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
