<p>用 display: flex 实现微信朋友圈左右两列布局：左侧设 flex: 0 0 60px，右侧设 flex: 1 1 0; min-width: 0；右侧内容用 column 方向嵌套 flex 布局，图片网格通过 flex-wrap 和 calc(33.333% - 6px) 实现 3 列，每图加 flex-shrink: 0 和 width: 100%。</p>
用 display: flex 实现左右两列布局，别碰 float 或 inline-block
微信朋友圈页面的「左用户信息 + 右内容区」结构，本质是主轴水平的 flex 容器。关键不是“怎么分两列”，而是“怎么让右侧不撑宽、左侧固定窄”。flex 的 flex-shrink 和 min-width 组合才是稳解。
-
display: flex用在父容器（比如.post），左侧头像/昵称设flex: 0 0 60px（不缩不胀，宽 60px） - 右侧内容区必须加
flex: 1，否则在窄屏下会溢出或换行 - 别给右侧设
width: 100%—— 它会和flex冲突，导致计算错误，尤其 iOS 微信 WebView 中容易错位 - 微信内置浏览器对
min-width: 0敏感：右侧若含长文本或未约束图片，务必加min-width: 0防止 flex 项强行撑宽容器
右侧内容用嵌套 flex 垂直分隔：名字、正文、图片网格
右侧不是“堆三个 div”，而是垂直 flex 容器，主轴 column。重点在于「图片网格」不能靠 flex-wrap: wrap 硬撑，得控制单行数量和间隙。
- 整个右侧设
display: flex; flex-direction: column;，子元素默认从上到下排列 - 名字区域（
.username）设flex: 0 0 auto，避免被压缩；正文（.content）设flex: 1 1 auto，让它占剩余空间但可收缩 - 图片网格（
.images-grid）单独再套一层display: flex; flex-wrap: wrap;，每张图用flex: 0 0 calc(50% - 4px)实现 2×2（微信朋友圈常见），gap: 4px控制间距（注意：iOS 14.5+ 才支持gap，老版本需用margin模拟） - 图片本身必须设
width: 100%; height: auto;，否则 flex 不会按预期缩放；禁止只设max-width: 100%，它不管高度，容易留白或变形
微信 WebView 下的 flex 兼容性雷区：iOS 12–14.4 必须加 flex-basis 显式值
在旧版微信（尤其是 iOS 微信 8.0.15 之前），flex: 1 在嵌套 flex 中可能失效，表现为右侧内容塌陷或文字溢出。这不是 bug，是 WebKit 对 flex-basis: 0% 的解析差异。
- 把
flex: 1拆成显式写法：flex-grow: 1; flex-shrink: 1; flex-basis: 0;（注意是0，不是0%） - 对图片网格中的每个
img，加flex-shrink: 0，否则某些安卓微信会把图片压成一条线 - 避免在 flex 项上同时用
width和flex，比如width: 50%; flex: 0 0 50%—— 旧版 WebView 会优先按width算，导致网格错行 - 测试时务必真机打开微信开发者工具「iOS 13.7」模拟器，CSS 自动前缀（
-webkit-flex）已不用加，但flex-basis的值类型必须严格
图片网格响应式断点：3 张图以上才切 3 列，且必须用 max-width 而非媒体查询硬切
朋友圈发 1/2/3/4/6/9 张图都常见，但用 media query 每种数量写一套规则太重。实际只需两档：≤3 张用 2 列（留白自然），≥4 张用 3 列 —— 关键是用容器宽度驱动，不是图片数量。
立即学习“前端免费学习笔记（深入）”；
- 图片网格容器设
max-width: 300px（微信正文区最大可用宽），然后用display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr))更稳，但微信不支持grid，所以退回到 flex - 更可靠的做法：给网格容器加
width: 100%，每张图用flex: 0 0 calc(33.333% - 6px)（3 列），再配合 JS 检查img数量，动态加 class 切换列数（如.grid-2col/.grid-3col） - 纯 CSS 方案：用
:nth-child(n+4)选中第 4 张及之后的图，设display: none并加「查看更多」按钮 —— 这是微信官方做法，别硬撑全显示 - 所有图片必须带
loading="lazy"，否则滑动时大量重排，iOS 微信会明显卡顿
微信朋友圈这类强交互+多端兼容的场景，flex 布局的“弹性”恰恰是最容易翻车的地方——你以为它会自动适应，其实它只按你写的 flex-basis 和 min-width 算。最常漏掉的是右侧容器的 min-width: 0 和图片的 flex-shrink: 0，这两处一缺，整行就偏。
