flex-basis设固定值后子元素仍被压缩，根本原因是默认flex-shrink: 1未关闭；真正锁死宽度需用flex: 0 0 200px（即flex-grow: 0、flex-shrink: 0、flex-basis: 200px），仅设flex-basis无效。
flex-basis设固定值后子元素还是被压缩？检查flex-shrink是否为0
flex-basis写成200px或30%，不代表宽度就锁死了。默认flex-shrink: 1会让它在空间不足时主动缩小——这常被误认为“flex-basis失效”。
真正锁死宽度要靠组合：flex: 0 0 200px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px）。只写flex-basis单独属性，等于没关掉收缩开关。
- IE11兼容性差：建议拆开写三个独立属性，或同时加
width: 200px - 侧边栏含长文本或图片时，还得加
min-width: 0，否则内容会撑开容器 - 若用
flex: 0 0 auto，实际宽度仍由内容决定，不是“固定”，只是“不伸缩”
min-width太小导致换行错乱？别只依赖百分比flex-basis
写flex-basis: 25%看起来是四列，但加上gap或padding后，可用宽度变小，可能卡在“差一点就换行”的临界点，尤其在响应式缩放时。
更稳的做法是用min-width驱动换行逻辑，比如设min-width: 280px，再配flex: 1 1 0，让浏览器根据容器总宽自动算能塞几列。
- 容器宽
- 避免
flex-basis: calc(25% - 12px)这类计算，CSS解析容错低，某些旧浏览器会直接当无效值处理 - 配合
box-sizing: border-box和gap，比手动加margin更可靠
子元素内容溢出破坏布局？min-width: 0不是万能解药
min-width: 0确实能松开 flex 项的最小尺寸限制，但它只对“可收缩的盒模型”生效。遇到img、input、textarea这类替换元素，它们自带min-width: auto，min-width: 0必须显式加在它们自己身上。
文字溢出也要分情况：纯英文单词需word-break: break-all或overflow-wrap: break-word；中文通常靠overflow: hidden + text-overflow: ellipsis截断。
- 给图片加
max-width: 100%和height: auto，防止撑破父容器 - 表格、inline-block元素嵌套在flex项里，也得加
min-width: 0，否则flex不会尝试压缩它们 - border会影响收缩表现，大边框建议改用
outline或背景色模拟
响应式切换时flex-basis突然失效？媒体查询里漏了关键重置
常见错误是只在媒体查询里改flex-basis，却忘了清掉min-width或flex-shrink。比如大屏下.sidebar { flex-basis: 240px; min-width: 240px; }，小屏时只写flex-basis: 100%，但min-width: 240px还在，结果它宁可溢出也不换行。
移动端堆叠布局，推荐统一用flex-direction: column + 全局重置：min-width: auto + flex: unset，而不是靠flex-basis硬调。
- 小屏切换时，
flex: 0 0 100%不如width: 100%+flex: none来得干脆 - 如果用
flex-basis: 100%实现单列，本质是让每个子项独占一行，这不是“换行”，是“放弃弹性布局” - 调试时临时加
border看实际渲染尺寸，比光看代码更准
复杂点在于：flex-basis控制的是“起点”，不是“终点”；min-width控制的是“底线”，但这条线会被内容、盒模型、浏览器默认行为反复抬高。真正稳固的布局，靠的是这两者和flex-shrink、flex-grow的协同约束，而不是单点设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
