左右等分应使用flex: 1或flex-basis: 50%，而非justify-content: space-between；后者仅两端对齐，不控制子元素宽度，flex方案更可靠且响应式友好。
flex 实现左右等分时 justify-content: space-between 不起作用？
它根本不是用来“等分”的——space-between 是把**第一个子元素钉在起点、最后一个钉在终点，中间空隙均分**。如果你只有两个子元素，看起来像“左右等分”，但本质是两端对齐，不是宽度均分。真正要的是每个元素占 50% 宽度，和间隙无关。
正确做法：用 flex: 1 或 flex-basis: 50%
让子元素主动声明自己该占多少空间，比依赖父容器的对齐方式更可靠。常见组合如下：
- 父容器设
display: flex，不加justify-content（或设为flex-start） - 两个子元素都设
flex: 1：自动均分剩余空间（推荐，响应式友好） - 或显式设
flex-basis: 50%+flex-grow: 0：严格限定宽度，避免内容撑开 - 注意加
box-sizing: border-box，防止 padding/border 导致溢出
.container {
display: flex;
}
.left, .right {
flex: 1;
box-sizing: border-box;
}
为什么不用 width: 50%？
纯 width: 50% 在 flex 容器里可能失效，尤其当子元素有 min-width 或内容过长时。flex 的 flex 属性会参与伸缩计算，而 width 只是初始尺寸参考。另外：
- 如果子元素有 margin，
width: 50%+ margin 会超 100%，必须用calc(50% - margin)，麻烦且易错 -
flex: 1自动处理 margin、gap、border 等，更健壮 - Flexbox 的
gap属性（现代浏览器）可直接替代 margin 实现间距，且不占子元素宽度
兼容性与 fallback 注意点
IE10/11 对 flex: 1 解析有差异，若需支持，建议：
立即学习“前端免费学习笔记（深入）”；
- 写全
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 避免只写
flex: 1（IE 下可能忽略flex-basis，导致按内容宽度计算） - 如必须用
space-between模拟两栏，至少加min-width: 0防止子元素溢出容器
真正需要左右等分时，别被 space-between 的视觉假象带偏——控制子项自身尺寸，比调度它们之间的空隙更直接、可控。
