flex: 1 不等于等宽三栏，因为它是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，当子项有固有尺寸（如长文本、img、button）时会顶开其他列；需统一设 min-width: 0 和 box-sizing: border-box，并避免 width 与 flex: 1 冲突。
为什么 flex: 1 不等于等宽三栏
因为 flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写，它让三列从「0 宽度」开始瓜分剩余空间——但只要其中一列有固有尺寸（比如未换行的长文本、没设 max-width 的 <img>、或自带 min-content 的 <button></button>），就会顶开其他列，导致视觉不等宽。
常见错误现象：computed styles 里看到某列的 flex-basis 是 auto 或具体像素值，而非 0px；或者 min-width 显示为 min-content。
- 所有子项必须加
min-width: 0，尤其对<img>、<button></button>、<input>等替换元素 - 统一设
box-sizing: border-box，否则padding和border会额外撑宽 - 避免给子项同时写
width和flex: 1，后者会覆盖前者 - 父容器别误加
justify-content: space-between，它插入的间隙会挤占可分配空间
如何强制三栏真正等高且等宽
Flex 默认就支持等高（align-items: stretch 是初始值），但“等高”不等于“等宽”，要同时满足两者，得切断内容对宽度的干扰。
关键不是多写属性，而是重置起点：让每列都从 flex-basis: 0 出发，再靠 flex-grow: 1 均分。
- 三列都写
flex: 1 1 0（显式写0比0%更稳妥，部分引擎解析更一致） - 每列内部若含图片，加
img { max-width: 100%; height: auto; } - 若含长单词或 URL，加
word-break: break-word和min-width: 0 - 父容器用
gap: 12px控制间距，别用margin，避免折叠和计算误差
移动端堆叠时为什么还有空白或错位
很多人只在媒体查询里改 flex-direction: column，却忘了子项仍带着横排时的 flex 值，导致竖排后高度不一致、上下留白异常。
小屏下三列必须重新声明宽度行为，不能依赖默认。
- 在
@media (max-width: 768px)中，给三列统一加flex: 0 0 100%（即不伸缩、不收缩、基准宽 100%） - 确保所有子项已设
box-sizing: border-box，否则padding会让实际宽度超 100% - 如果之前用了
gap，小屏下可改用gap: clamp(8px, 1vw, 16px)动态适配 - 语义上主内容在中间，可加
order: -1让它在竖排时视觉和读屏器都优先
什么时候该换 Grid 而不是硬调 Flex
当三栏之间需要跨行、行列对齐、重排序或频繁响应式断点变化时，Flex 就开始吃力了。比如侧边栏+主内容+右工具栏这种结构，Grid 天然支持 grid-column、grid-row 和 order 独立控制。
Flex 强行做二维控制，得靠 align-items + justify-content + 各种 hack；Grid 一行 grid-template-columns: 240px 1fr 160px 就搞定固定+自适应组合。
- 需要某栏横跨三列（如 banner）：Grid 用
grid-column: 1 / -1，Flex 得抽出来单独处理 - 想让中栏在小屏时移到顶部：Grid 用
grid-row: 1或order，Flex 的order只改视觉顺序，语义结构不变 - 要实现“尽可能多列，最小不小于 300px”：Grid 用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，Flex 没等效机制
flex-basis、加 min-width，还是该切到 Grid —— 这时候打开 DevTools 看一眼 computed 里的 flex-basis 和 min-width 值，比查文档更快。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
