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

发布时间 - 2026-01-25 00:00:00 点击率：次

两列等分应优先用grid的1fr 1fr，语义清晰且不受内容干扰；若用flex:1，需确保父容器display:flex、子元素无固定宽度，并设min-width:0防长内容撑破。

直接给两个子元素都设 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 方案语义清晰、行为确定：两列各占 1 份可用轨道空间，不受内容尺寸干扰，也不依赖 flex-basis 魔法值。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.col {
  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 和内容截断处理才是决定是否“真等分”的关键。