Flex多列自适应关键在于动态分配空间，需设置min-width控制压缩、启用flex-wrap实现换行、约束图文尺寸防溢出，并辅以媒体查询优化断点。
用 Flex 布局实现多列自适应，关键不在“均分”，而在“根据内容与容器动态分配空间”。错位往往是因为没处理好 flex 项的最小宽度、换行逻辑或内容溢出。
控制最小宽度，避免列被压缩变形
Flex 默认会把子项缩到 min-width: auto（即内容最小宽度），但文字多、图片大时容易撑破容器或导致错行。解决方法是显式设置 min-width: 0（对文字/图片容器）或 min-width: 200px（对有最小展示需求的列）：
- 给每列 flex 项加
min-width: 0，允许文本折行、图片缩放，
防止横向溢出 - 若列需保底宽度（如侧边栏、卡片），设
min-width: 240px，再配合flex: 1实现弹性伸缩
防止横向溢出合理使用 flex-wrap，让列在小屏自动换行
单行布局（flex-wrap: nowrap）在手机上必然错位。应主动启用换行，并用 justify-content 控制对齐方式：
- 容器设
display: flex; flex-wrap: wrap; - 搭配
justify-content: space-between或center，避免最后一行列左对齐留白 - 配合
gap: 16px替代 margin，确保换行后间距一致
图文混排时，约束图片和文本行为
错位常源于图片未限制尺寸，或长文本不折行。需分别处理：
- 图片加
max-width: 100%; height: auto;，并包裹在min-width: 0的容器内 - 标题或描述文字加
word-break: break-word;和overflow-wrap: break-word; - 避免对 flex 项设固定
width，改用flex: 0 1 300px（不放大、可缩小、基准宽300px）
必要时搭配媒体查询微调断点
Flex 虽强大，但复杂布局仍需断点辅助。例如：
- ≥768px：三列
flex: 1并排 - ≤767px：设
flex-direction: column;变单列，或保留flex-wrap改为两列 - 用
@container（若支持）替代视口媒体查询，实现更精准的上下文响应
不复杂但容易忽略。核心就三点：控住最小宽、放开换行、管好内容流。
