实现 Flex 容器中首项垂直排列、其余项水平排列的响应式双列布局

文章不知道大家是否熟悉？今天我将给大家介绍《实现 Flex 容器中首项垂直排列、其余项水平排列的响应式双列布局 》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

本文介绍如何在 HTML 结构不可修改的前提下，仅通过 CSS 实现左侧固定宽度单列（内容纵向占满）、右侧多行自适应等宽列的网格布局——推荐使用 CSS Grid 而非 Flexbox，因其原生支持二维布局控制。

本文介绍如何在 HTML 结构不可修改的前提下，仅通过 CSS 实现左侧固定宽度单列（内容纵向占满）、右侧多行自适应等宽列的网格布局——推荐使用 CSS Grid 而非 Flexbox，因其原生支持二维布局控制。

在给定 HTML 结构下：

<div class="cont">
  <div class="c1">1</div>
  <div class="l2">2</div>
  <div class="l3">3</div>
  <div class="l4">4</div>
</div>

目标是构建如下二维布局：

• 左侧 c1 占据整列（垂直方向跨越所有行），宽度由内容或显式设定（如 200px）；
• 右侧 l2、l3、l4 自上而下依次排列，共享同一列，且该列自动填充剩余可用宽度。

Flexbox 的局限性：Flexbox 是一维布局模型，虽可设置 flex-direction: column 或 row，但无法让一个子元素同时控制跨行与另一组元素按行堆叠——尤其当首项需纵向贯穿、其余项需横向对齐时，Flex 无法天然协调两个正交方向的尺寸与位置关系。

✅ 正确解法：CSS Grid

利用 Grid 的二维能力，定义两列布局，并精确控制首项的行跨度：

.cont {
  display: grid;
  grid-template-columns: auto 1fr; /* 左列宽度由内容决定，右列为剩余空间 */
  gap: 0; /* 可选：控制行列间距 */
}

.c1 {
  grid-row: span 100; /* 纵向跨越最多 100 行（安全值，远超实际行数） */
  width: 200px;       /* 显式设定左列宽度（也可用 min-content / fit-content） */
}

/* 可视化调试（生产环境请移除） */
.cont > div {
  border: 2px dashed #e74c3c;
  padding: 12px;
  box-sizing: border-box;
}

✅ 关键说明：

• grid-template-columns: auto 1fr 中，auto 使左列宽度由 .c1 的内容或 width 属性决定；1fr 表示右列占据所有剩余空间。
• grid-row: span 100 是可靠替代方案——当行数不确定时，避免硬编码 span 3（若后续新增元素则失效），100 是足够安全的上限值（浏览器会自动截断至实际最大行数）。
• 所有后续元素（.l2、.l3、.l4）默认按源顺序逐行填入第二列，无需额外定位。

? 进阶提示：

• 若需左列最小宽度保障，可用 minmax(200px, auto) 替代 auto；
• 如需右侧区域等高（如每行高度一致），可配合 grid-auto-rows: minmax(80px, auto)；
• 兼容性方面，现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）均完整支持该写法。

综上，面对「首项纵向占满、余项横向分布」的二维需求，请果断放弃 Flexbox 的一维思维，转向语义清晰、控制精准的 CSS Grid 方案。

以上就是《实现 Flex 容器中首项垂直排列、其余项水平排列的响应式双列布局 》的详细内容，更多关于的资料请关注golang学习网公众号！