用 display: flex 实现图片+文字垂直对齐需设 flex-direction: column，图片容器用 aspect-ratio + object-fit: cover 防拉伸，文字截断必加 min-width: 0 配合 ellipsis 三件套。
用 display: flex 实现图片+文字的垂直对齐，但别直接套默认值
Flex 布局确实适合 Instagram 风格的信息流（头像+用户名+图片+点赞/评论按钮），但很多人一上来就给容器写 display: flex，结果文字贴顶、图片拉伸、行高错乱。关键不是“用了 Flex”，而是控制主轴和交叉轴的方向与对齐方式。
常见错误现象：align-items: stretch（默认值）会让文字区域被撑满高度，导致行高失效；flex-direction: row（默认）又让头像和内容横排，不符合信息流结构。
- 信息流每条卡片建议用
flex-direction: column，让头像、用户名、图片、操作栏自上而下排列 - 图片区域单独设为
flex: 1或固定宽高比容器（如aspect-ratio: 4/5），避免拉伸变形 - 用户名和操作按钮这类文字行，用
align-self: flex-start防止被居中或撑开 - 如果图片要响应式缩放，优先用
object-fit: cover而不是width: 100%+height: auto，后者在 Flex 容器里容易失高
处理图片宽高比不一致时，aspect-ratio 比 padding-top 更可靠
Instagram 的图片流常混有竖图、横图、方图，传统做法是用 padding-top 百分比占位 + 绝对定位图片，但这种方式在 Flex 容器里容易和 flex-shrink 冲突，尤其在小屏下图片被压缩成窄条。
aspect-ratio 是现代解法，支持 Chrome 88+、Firefox 89+、Safari 15.4+，兼容性已覆盖主流设备。
- 给图片外层容器加
aspect-ratio: 4/5（竖构图）或1/1（方图），再让<img>本身设为width: 100%; height: 100%; object-fit: cover - 不要给图片容器设
height，否则会覆盖aspect-ratio效果 - 若需兼容旧浏览器，可用
@supports not (aspect-ratio: 1)回退到 padding-top 方案，但只作为降级，不主推
文字截断与溢出控制，在 Flex 容器里必须显式设置 min-width: 0
用户名或标题文字过长时，用 text-overflow: ellipsis 失效是高频问题。根本原因：Flex 子项默认 min-width: auto，会阻止文本收缩，哪怕你写了 white-space: nowrap 和 overflow: hidden。
这个点极容易被忽略，调试时看着样式都写了，就是不生效。
- 对需要截断的文字容器（如
.username），必须加min-width: 0 - 同时配齐三件套：
white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 如果该文字容器是 Flex 子项且父容器也用了 Flex，那
min-width: 0就是硬性前提，缺一不可
移动端点击热区太小？别只加 padding，检查 touch-action 和 user-select
Instagram 流里点赞、评论按钮常是小图标，用户点不中。表面看是尺寸问题，但深层常因 CSS 干预了触摸行为。
- 确保按钮容器有足够点击面积（推荐最小 44×44px），用
padding扩展，而不是只靠图标本身大小 - 避免在按钮父层误设
touch-action: none（比如某些重写滚动的 JS 库会注入），它会禁用所有原生触摸反馈 - 如果按钮内含文字或伪元素，确认没被
user-select: none锁死——这不会影响点击，但会让长按误触发系统菜单，干扰体验 - 真机测试时，打开 Chrome DevTools 的 “Rendering” 面板，勾选 “Show hit test borders”，能直观看到实际可点区域
min-width: auto、align-items: stretch、flex-shrink: 1。Instagram 式流布局的复杂点不在结构，而在如何一层层关掉这些“好意过头”的默认值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
