实现 Flex 容器中首项垂直排列、其余项水平排列的响应式双列布局-html教程-PHP中文网

实现 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

jQuery+CSS3 3D立体图片排列布局代码

下载

利用 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）默认按源顺序逐行填入第二列，无需额外定位。

? 进阶提示：