css布局两列等分如何写_通过 flex 1 或 grid fr 单位实现

两列等分应优先用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 和内容截断处理才是决定是否“真等分”的关键。