两列等分应优先用grid的1fr 1fr，语义清晰且不受内容干扰；若用flex:1，需确保父容器display:flex、子元素无固定宽度，并设min-width:0防长内容撑破。
用 flex: 1 实现两列等分的注意事项
直接给两个子元素都设 flex: 1 确实能等分，但前提是父容器必须是 display: flex，且子元素不能有固定宽度（如 width 或 min-width）干扰伸缩计算。
- 如果某列内容很长（比如超长 URL），默认会换行；若加了
white-space: nowrap，它可能撑破容器——此时需配合overflow: hidden或text-overflow: ellipsis -
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0的简写，关键在flex-basis: 0：它让两列从“零宽度”开始按比例分配剩余空间，避免内容宽度影响均分逻辑 - 慎用
flex: 1 1 auto——flex-basis: auto会让元素先按自身内容宽度占位，再伸缩，容易导致不等宽
.container {
display: flex;
}
.col {
flex: 1;
}
.col:first-child {
background: #e0f7fa;
}
.col:last-child {
background: #ffccbc;
}用 grid 的 1fr 1fr 更直观可靠
grid 方案语义清晰、行为确定：两列各占 1 份可用轨道空间，不受内容尺寸干扰，也不依赖 flex-basis 魔法值。
-
1fr 1fr和repeat(2, 1fr)效果一致，后者更适合扩展为多列 - 若需要留间隙，优先用
gap（不是margin），它不会影响轨道计算，且自动避开容器边缘 - IE 不支持
fr单位（需回退到display: flex或float），但现代项目基本可忽略
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.col {
min-width: 0; /* 防止长内容撑破 */
}
为什么 min-width: 0 在两种方案里都常被忽略
浏览器默认给 flex/grid 子项设 min-width: auto，意味着它不会压缩到比内容最窄宽度还小——比如一个长单词或未换行的链接，会导致列宽失衡甚至溢出。
- 加
min-width: 0后，该列才真正遵守flex: 1或1fr的分配规则 - 只对可能含长不可折内容的列加，不影响布局稳定性
- 和
overflow: hidden搭配时，记得同时设text-overflow: ellipsis和white-space: nowrap才生效
两列等分本身简单，但真实页面里内容不可控，min-width: 0 和内容截断处理才是决定是否“真等分”的关键。
立即学习“前端免费学习笔记（深入）”；
