flex布局中图像位置由justify-content（水平）和align-items（垂直）控制，需容器有明确交叉轴尺寸；图像应设max-width:100%防溢出，多图用flex-wrap+gap布局。
flex布局中图像位置由容器的justify-content和align-items控制
图像在flex容器里的位置不是靠margin或position硬调，而是由父容器的两个核心属性决定：水平对齐用justify-content，垂直对齐用align-items。这两个属性作用于所有直接子元素（包括<img>），且优先级高于子元素自身的margin: auto（除非是单个子元素）。
-
justify-content: center→ 图像水平居中（容器主轴方向） -
align-items: center→ 图像垂直居中（容器交叉轴方向） - 若容器设为
flex-direction: column，则justify-content管垂直，align-items管水平 - 单独一个
<img>时，margin: auto也能实现完全居中，但这是利用了flex的自动外边距行为，不是通用解法
图像自身尺寸影响flex对齐效果
flex不会自动缩放图像；如果<img>原始尺寸超过容器，可能溢出或撑开容器，导致对齐“失效”。常见表现是图像顶到左上角、右侧被截断，或容器高度异常。
- 加
max-width: 100%和height: auto让图像响应式缩放 - 若需强制等比缩放到容器内，用
object-fit: contain（配合width: 100%和height: 100%） - 避免给
<img>设固定width/height，除非明确知道容器尺寸 - 注意
flex-shrink: 0（默认值）会让大图拒绝缩小，此时必须显式设flex-shrink: 1或覆盖max-width
多图排列时用flex-wrap和gap更可靠
想让多张图像自动换行排列，别依赖float或inline-block，直接用flex的换行机制。
- 父容器加
flex-wrap: wrap，图像会按主轴顺序填满后自动折行 - 用
gap: 8px代替margin控制图间距，避免首尾多出空白 - 每张图建议设
flex: 1 1 auto（即flex-grow: 1,flex-shrink: 1,flex-basis: auto），让它们等宽自适应 - 若图像宽度需严格均分（如三图横排），可设
flex: 1并配合min-width: 0防文字撑宽
图像居中但容器有滚动条？检查overflow和box-sizing
有时明明写了justify-content: center和align-items: center，图像却贴左上——大概率是容器本身有隐藏滚动条或盒模型计算偏差。
立即学习“前端免费学习笔记（深入）”；
- 确认父容器没设
overflow: hidden意外裁剪，或overflow: auto触发滚动条占位 - 确保容器有明确宽高（flex项目居中需要交叉轴有确定尺寸）
- 检查是否漏了
box-sizing: border-box，边框/内边距导致实际可用空间变小 - 用浏览器开发者工具选中图像，看computed样式里
align-self是否被子元素自身设置覆盖（如align-self: flex-start）
height），否则align-items: center在块级上下文中可能无效**。 
