固定宽度需在flex中设flex-basis并加flex-shrink: 0（如flex: 0 0 200px），grid中用grid-template-columns配具体长度单位（如200px 1fr）；混用width与flex属性或忽略收缩控制会导致失效。
flex 里用 flex-basis 控制固定宽度，但别漏掉 flex-shrink: 0
直接设 width 在 flex 容器子元素上可能失效，因为默认 flex-shrink: 1 会压缩它。想真正“固定”，得显式禁用收缩：
-
flex-basis设具体值（如200px或10rem），它比width更优先参与 flex 计算 - 必须加
flex-shrink: 0，否则容器空间不足时仍会被压窄 - 可简写为
flex: 0 0 200px（即flex-growflex-shrinkflex-basis）
.item {
flex: 0 0 200px;
}
grid 中用 grid-template-columns 直接定义列宽，最稳
Grid 天然适合固定尺寸布局，不用纠结收缩/拉伸逻辑。关键在列轨道定义方式：
- 用具体长度单位：
200px、10rem、5em都行，浏览器照单全收 - 避免混用
fr和固定值时没留余地，比如200px 1fr是安全的，但200px 300px且容器太窄，内容就会溢出 - 如果要响应式固定宽，可用
minmax(200px, 200px)—— 看似冗余，但能防止媒体查询遗漏时被意外拉伸
.container {
display: grid;
grid-template-columns: 200px 1fr 150px;
}
固定宽遇上内容溢出：别只靠 width，得配 overflow 和 white-space
即使尺寸设对了，长文本或内联元素仍可能撑破容器。这不是 flex/grid 的问题，而是渲染行为本身：
- 块级元素默认
white-space: normal，会换行；但包裹的链接等可能不换行 - 加
overflow: hidden可裁剪，但更推荐overflow: hidden; text-overflow: ellipsis; white-space: nowrap组合处理单行文本 - 如果是多行文本截断，
display: -webkit-box方案兼容性有限，现代项目建议用line-clamp（需配合display: flex或block+overflow）
不要用 width + flex: 1 混搭
这种写法常见但危险：width: 200px; flex: 1; 表面看是“固定宽+占剩余空间”，实际 flex: 1 会覆盖 width，最终宽度由 flex 分配决定，和 200px 无关。
立即学习“前端免费学习笔记（深入）”；
- 想让某元素固定、其余自适应，就该明确分离角色：固定项用
flex: 0 0 200px，自适应项用flex: 1 - Grid 更清晰：固定列用像素值，自适应列用
1fr，语义和行为完全解耦 - 调试时检查 computed styles，重点看
flex-basis实际解析值是不是你写的那个数字
width 就完事，flex 和 grid 各有计算逻辑，漏掉 flex-shrink: 0 或误用 flex 缩写是最常踩的坑。 
