使用 CSS Flexbox 实现复杂多行多列布局教程-html教程-PHP中文网

使用 CSS Flexbox 实现复杂多行多列布局教程

霞舞

发布： 2025-10-15 12:42:17

原创

398人浏览过

使用 CSS Flexbox 实现复杂多行多列布局教程

本教程将详细指导如何利用 css flexbox 高效构建复杂的多行多列页面布局。通过一个具体的布局案例，我们将深入探讨 flexbox 的核心属性，如 flex-direction、width 和 height，以及如何通过嵌套 flex 容器实现精细的布局控制，避免使用不当的绝对定位，从而创建结构清晰、响应性强的页面。

引言：Flexbox 在复杂布局中的优势

在现代网页开发中，实现灵活且响应式的页面布局是至关重要的。传统的浮动（float）或定位（position）方法在处理复杂的多行多列布局时往往显得力不从心，容易导致代码冗余、维护困难，并且难以适应不同屏幕尺寸。CSS Flexbox（弹性盒子布局）作为一种一维布局模型，极大地简化了这些挑战。它提供了一种更有效的方式来在容器中排列、对齐和分配空间，即使项目的大小未知或动态变化。

本教程将以一个具体的布局需求为例，演示如何利用 Flexbox 的强大功能，优雅地构建一个包含多行、不同列宽比例以及嵌套元素的复杂布局。我们将避免使用硬编码的 margin-top 或 position: absolute 等脆弱的布局方式，转而采用 Flexbox 的声明式特性，以实现更健壮和可维护的代码。

布局需求解析

我们的目标是实现以下四部分组成的页面布局：

顶部标题区： 占据整个行宽。
第二行内容区：
- 左侧区块占据 80% 宽度。
- 右侧区块占据 20% 宽度，且内部垂直堆叠两个等高子区块。
- 左右两侧区块应保持相同的高度。
第三行内容区：
- 包含两个等高区块，各占据 50% 宽度，并排显示。
底部大标题区： 占据整个行宽。

这个布局需求涵盖了 Flexbox 在垂直和水平方向上的核心应用，特别是嵌套 Flex 容器的使用，是理解其强大之处的关键。

立即学习“前端免费学习笔记（深入）”；

Flexbox 核心策略：外层垂直堆叠，内层水平排列

要实现上述布局，我们的核心策略是：

主容器（big-container） 采用 display: flex; flex-direction: column;，使其内部的直接子元素（即各个“行”）垂直堆叠。
每个“行”容器 （如 row1, row2）根据其内部元素的排列需求，自身再设置为 display: flex; flex-direction: row;，使其内部的子元素水平排列。
嵌套区块 （如第二行右侧的子区块）则在其父容器中再次应用 Flexbox 布局，实现更精细的控制。

这种层层嵌套的 Flex 容器模式，是构建复杂布局的强大且灵活的方法。

HTML 结构搭建

首先，我们来构建符合上述布局需求的 HTML 骨架。我们将使用语义化的类名来提高代码的可读性。

开拍

用AI制作口播视频

289

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 复杂布局示例</title>
  <link rel="stylesheet" href="style.css"> <!-- 引入CSS文件 -->
</head>
<body>

  <div class="big-container">

    <!-- 顶部标题区 -->
    <div class="heading-row">
      <h1>页面顶部大标题</h1>
    </div>

    <!-- 第二行内容区：80%-20% 布局，20%部分内含垂直堆叠区块 -->
    <div class="row1">

      <div class="box1">
        <p>这是第二行的左侧区块，占据 80% 宽度。</p>
        <p>可以放置主要内容。</p>
      </div>

      <div class="box2">
        <div class="verticle-box1">
          <p>右侧上半部分内容</p>
        </div>
        <div class="verticle-box2">
          <p>右侧下半部分内容</p>
        </div>
      </div>

    </div>

    <!-- 第三行内容区：50%-50% 布局 -->
    <div class="row2">

      <div class="box1">
        <p>这是第三行的左侧区块，占据 50% 宽度。</p>
      </div>

      <div class="box2">
        <p>这是第三行的右侧区块，占据 50% 宽度。</p>
      </div>

    </div>

    <!-- 底部大标题区 -->
    <div class="big-heading">
       <h1>页面底部大标题</h1>
    </div>

  </div>

</body>
</html>

登录后复制

CSS 样式实现与解析

接下来，我们将为上述 HTML 结构添加 CSS 样式，逐步实现预期的布局。

/* style.css */

/* 全局重置与视口设置 */
body {
  padding: 0;
  margin: 0;
  min-height: 100vh; /* 确保body至少占满视口高度 */
  width: 100vw; /* 确保body占满视口宽度 */
  font-family: Arial, sans-serif;
  color: #333;
  background: #f8f8f8; /* 页面背景色 */
}

/* 主容器：垂直堆叠所有行 */
.big-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保主容器至少占满视口高度 */
}

/* 顶部和底部标题行样式 */
.heading-row, .big-heading {
  width: 100%; /* 占据整行宽度 */
  background-color: #e0f2f7; /* 标题背景色 */
  padding: 20px 0;
  text-align: center;
  box-sizing: border-box; /* 确保padding不增加元素总宽度 */
  color: #2196f3;
}
.heading-row h1, .big-heading h1 {
    margin: 0; /* 移除h1默认外边距 */
    font-size: 2em;
}
.big-heading {
    background-color: #c8e6c9; /* 底部标题不同背景色 */
    color: #4caf50;
}


/* 第二行布局：80%-20% 比例，内部嵌套垂直区块 */
.row1 {
  display: flex; /* 使内部区块水平排列 */
  flex-grow: 1; /* 允许此行伸展占据剩余垂直空间 */
  min-height: 300px; /* 最小高度，防止内容过少时塌陷 */
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.row1 .box1 {
  width: 80%; /* 左侧区块占据 80% 宽度 */
  /* height: 100%; */ /* 在flex容器中，子元素默认会填充交叉轴，这里可以省略 */
  background: #f5f5f5; /* 示例背景色 */
  display: flex; /* 使内容在box1内部居中 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
  border-right: 1px solid #eee;
}

.row1 .box2 {
  width: 20%; /* 右侧区块占据 20% 宽度 */
  /* height: 100%; */
  background: #e3f2fd; /* 示例背景色 */
  display: flex;
  flex-direction: column; /* 关键：使内部子区块垂直堆叠 */
  box-sizing: border-box;
}

.row1 .box2 > * {
  height: 50%; /* 内部两个子区块各占 50% 高度 */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  color: #1976d2;
}

.row1 .box2 .verticle-box1 {
  background-color: #bbdefb; /* 内部区块背景色 */
  border-bottom: 1px solid #90caf9;
}

.row1 .box2 .verticle-box2 {
  background-color: #90caf9; /* 内部区块背景色 */
}

/* 第三行布局：50%-50% 比例 */
.row2 {
  display: flex; /* 使内部区块水平排列 */
  flex-grow: 1; /* 允许此行伸展占据剩余垂直空间 */
  min-height: 250px; /* 最小高度 */
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.row2 > * {
  /* height: 100%; */ /* 同上，在flex容器中默认填充 */
  width: 50%; /* 两个子区块各占 50% 宽度 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
}

.row2 .box1 {
 background: #fffde7; /* 示例背景色 */
 border-right: 1px solid #eee;
 color: #fbc02d;
}
.row2 .box2 {
 background: #f3e5f5; /* 示例背景色 */
 color: #9c27b0;
}

登录后复制

CSS 样式解析：

body 和 .big-container：
- body 设置 min-height: 100vh 和 width: 100vw 确保页面占满整个视口，并移除了默认的 margin 和 padding。
- .big-container 是我们所有内容的根容器。它被设置为 display: flex; flex-direction: column;，这意味着它的直接子元素（即 heading-row, row1, row2, big-heading）将垂直堆叠。min-height: 100vh 确保即使内容不多，主容器也能占据整个视口高度。
.heading-row 和 .big-heading：
- 这两个类用于顶部和底部的标题行。它们简单地设置 width: 100% 来占据父容器的全部宽度，并添加一些 padding 和 text-align: center 来美化显示。box-sizing: border-box 是一个重要的声明，它确保 padding 不会增加元素的总宽度。
.row1 (第二行布局)：
- display: flex; 使其内部的 box1 和 box2 水平排列。
- flex-grow: 1; 允许此行在 big-container 中伸展，占据除标题行之外的剩余垂直空间。
- min-height: 300px; 提供了一个最小高度，防止内容过少时行塌陷。
- .row1 .box1 设置 width: 80%;，占据行宽的 80%。
- .row1 .box2 设置 width: 20%;，占据行宽的 20%。关键在于，它自身也被设置为 display: flex; flex-direction: column;。 这使得其内部的 verticle-box1 和 verticle-box2 能够垂直堆叠。
- .row1 .box2 > * 针对 box2 的直接子元素（即 verticle-box1 和 verticle-box2）设置 height: 50%;，使它们各自占据 box2 高度的一半。
.row2 (第三行布局)：
- 与 row1 类似，display: flex; 使其内部的 box1 和 box2 水平排列。
- flex-grow: 1; 允许此行伸展。
- .row2 > * 针对 row2 的直接子元素设置 width: 50%;，使它们各自占据行宽的一半。