Flex布局需结合百分比宽度和媒体查询才能适配移动端：1. 使用flex-basis设百分比控制子项基础尺寸；2. 通过max-width限制宽度，box-sizing确保尺寸计算准确；3. 在@media中调整flex-direction、flex-wrap等属性适配断点；4. 设置min-width和max-width配合flex实现弹性伸缩，防止变形。
Flex布局在移动端表现良好，但若不结合响应式设计策略，容易出现元素错位、换行异常或宽度溢出等问题。解决适配不良的关键在于灵活使用百分比宽度与媒体查询（media queries）进行补充控制，确保布局在不同屏幕下都能合理呈现。
使用百分比宽度控制flex子项的基准尺寸
Flex的flex-grow、flex-shrink和flex-basis虽然强大，但在小屏幕上可能因内容撑开导致布局混乱。此时可为子元素设置基于父容器的百分比宽度，作为更可控的基础尺寸。
- 将flex-basis设为百分比值，如
flex-basis: 50%，实现等分布局 - 配合max-width限制最大宽度，防止内容过宽
- 使用
box-sizing: border-box确保内边距和边框包含在宽度计算中
通过media查询调整断点下的flex行为
不同设备屏幕宽度差异大，需在关键断点调整flex布局结构。例如在手机上让原本横向排列的项目垂直堆叠。
- 在
@media (max-width: 768px)中修改flex-direction为column - 调整flex-wrap属性允许换行，避免水平溢出
- 针对特定屏幕尺寸重设flex-basis或是否启用flex-grow
结合min-width与max-width增强弹性
为flex子项设置最小和最大宽度，防止在极端屏幕下变形。例如一个卡片在大屏时占1/3，小屏时自动变为100%宽度。
立即学习“前端免费学习笔记（深入）”；
- 设置
min-width: 280px保证内容可读性 - 使用
max-width: 100%防止超出容器 - 配合
flex: 1 1 auto实现自适应伸缩
基本上就这些。Flex本身是响应式的良好基础，但要真正适配移动端，必须结合百分比和media查询进行精细化控制。不复杂但容易忽略。
