flex: 1 在三栏中不直接等宽，因其等价于 flex: 1 1 0，从 0 宽度起步均分剩余空间，但受内容固有尺寸、min-width: auto 及 flex-shrink 影响易失衡；真正等宽需显式设 flex-basis（如 calc(33.333% - gap)）或配合 min-width: 0 + white-space 控制。
flex: 1 在三栏中直接等宽会失效
很多人一上来就给三个子元素都写 flex: 1，结果发现：小屏下三栏挤成一条线、文字换行错乱、甚至右侧栏被截断。这不是 bug，而是 flex: 1 等价于 flex: 1 1 0，它的基准宽度是 0，所有栏从零开始按比例分剩余空间——但当容器窄到连内容最小宽度都容不下时，浏览器只能强行压缩或溢出。
真正可控的等宽逻辑，得靠显式控制 flex-basis 和收缩行为：
- 三个栏都设
flex: 0 1 calc(33.333% - 16px)（减去 gap 后的单栏宽度），但需手动算值，响应式时难维护 - 更稳妥的是用
flex: 1+min-width: 0组合，强制允许压缩到内容最小宽度以下（比如图片、长单词） - 若内容含不可折行元素（如
或固定宽组件），必须额外加overflow-x: auto或white-space: nowrap控制
用 flex-wrap + justify-content: space-between 实现“伪等宽”
当三栏内容高度差异大、又不想用 align-items: stretch 拉齐时，justify-content: space-between 配合 flex-wrap: wrap 是个轻量解法——它不保证每栏像素级等宽，但视觉上均匀分布，且能自然换行。
关键点在于避免父容器设 width: 100% 后再用 max-width 限制，否则 space-between 的间距计算会失准：
- 容器只设
display: flex和flex-wrap: wrap，不设width - 每个子项设
flex: 0 0 calc(33.333% - 16px)（gap 为 16px 时） - 用
margin-bottom: 16px替代gap，避免 IE 对gap不支持导致错位
@media 中改 flex-direction: column 不等于响应式三栏
在手机上把三栏变单列，很多人只改容器的 flex-direction: column，却忘了子项默认不占满宽度——尤其当子项有 width、max-width 或 flex-basis 时，它们会保持原宽度，造成左侧空白或横向滚动条。
正确做法是断点内重置宽度策略：
- 小屏下必须加
width: 100%到每个子项，或统一设flex: 1 1 auto - 如果用了
gap，记得在 column 下也保留，它在垂直方向同样生效 - 避免在 column 模式下还保留
justify-content: space-between，会导致顶部和底部留白过大
flex 做等宽三栏 vs grid 做等宽三栏的本质区别
用 display: grid 写 grid-template-columns: 1fr 1fr 1fr 看似更简洁，但它和 flex 的“等宽”不是一回事：grid 的 fr 是基于网格轨道分配，完全无视子项内容；flex 的等宽是基于主轴剩余空间动态分配，受子项 min-width、内容撑开、flex-shrink 影响更大。
这意味着：
- 如果你的三栏里有固定宽组件（比如广告图、图标按钮），flex 更容易被撑破布局，grid 更稳定
- 如果需要中间栏优先收缩、侧栏保底（比如左导航+主内容+右工具栏），flex 的
flex-basis控制粒度更细 - IE11 只支持部分 flex 属性（
flex: 1解析为flex: 1 0 auto），而 grid 在 IE11 中基本不可用，选型前必须确认兼容范围
实际项目里，等宽三栏若无特殊交互需求，优先用 grid；若需配合 JS 动态增删栏、或依赖内容驱动宽度变化，flex 的运行时行为更可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
