flex-wrap: wrap 是九宫格铺开的前提，不加则所有子项挤在一行，小屏仅显前3张；必须显式声明并配flex-direction: row、aspect-ratio: 1或固定高、justify-content: space-between、overflow: hidden、flex: 0 0 calc(33.333% - 8px)、box-sizing: border-box及object-fit: cover。
flex-wrap: wrap 是九宫格能铺开的前提
不加 flex-wrap: wrap，所有图片默认挤在一行，小屏上只显示前 3 张，后 6 张被裁掉或压成一条细线——这不是 bug，是 Flex 的默认行为。
必须显式声明：flex-wrap: wrap，并建议同时写 flex-direction: row（虽为默认值，但防被全局样式覆盖）。
- 容器高度要设约束：用
aspect-ratio: 1、固定height或伪元素撑高，否则高度塌陷，看不出“格” -
justify-content推荐space-between或space-around；别用center，会导致左右留白不均 - 父容器加
overflow: hidden，防止 margin 外扩引发横向滚动条
别用 width: 33.333%，改用 flex: 0 0 calc()
width: 33.333% 在 Flex 容器里只是参考值，图片内容一进来，flex-shrink 就会把它拉窄，iOS Safari 下尤其明显。
真正锁死等宽的写法是：flex: 0 0 calc(33.333% - 8px)（假设间隙总宽为 8px，即左右各 4px）：
- 第一个
0→flex-grow: 0：不放大 - 第二个
0→flex-shrink: 0：不缩小 -
calc(33.333% - 8px)→flex-basis：扣掉整行 gap 总和，不是一半 - 务必配
box-sizing: border-box，否则 padding/border 会让格子实际变大
4 张图是唯一需要手动干预的临界点
朋友圈九宫格不是固定 3×3：1 张铺满、2–3 张横排、4 张必须是 2×2、5–9 张才上 3×3。硬套 grid-template-columns: repeat(3, 1fr) 或统一设 33.333% 宽度，4 张图会变成 3+1，右侧大片空白。
正确做法是用 :nth-child(3):nth-last-child(2) 精准命中第 3 张（即 4 张图时的第二行起始），给它加 margin-right: 0，把它“挤”下去：
- 不要写死
:nth-child(4)：只有 3 张图时这条规则根本不会生效，调试时容易误判 -
:nth-child(n)无法知道总数，必须搭配:nth-last-child()才能判断张数 - 单张图最简写法就是
img:first-child:last-child，比:nth-child(1):nth-last-child(1)更可靠
图片裁剪要用 object-fit: cover，不是 width/height
直接对 <img> 设 width/height 会拉伸变形；朋友圈实际渲染是等比缩放 + 居中裁剪。
正确姿势是包裹一层 <div class="image-item">，再设尺寸：<ul>
<li><code>.image-item { width: 100%; height: 100%; }
img { width: 100%; height: 100%; object-fit: cover; }-webkit-object-fit: cover
cover 会导致关键区域被裁——此时得前端用 canvas 预处理，或和服务端约定统一比例4 张图这个边界情况最容易被跳过，但它恰恰是用户发图频率最高的组合之一；没覆盖它，等于默认放弃了一类真实场景。gap 用 margin 模拟而非 CSS gap，是因为 Flex 中 gap 兼容性仍不够稳——这点连不少团队内部文档都写错了。
