本教程将详细指导如何利用 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 骨架。我们将使用语义化的类名来提高代码的可读性。
Flexbox 复杂布局示例
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%;，使它们各自占据行宽的一半。
通过这种方式，我们利用 Flexbox 的嵌套特性，实现了复杂的二维布局，并且代码结构清晰，易于理解和维护。
注意事项与最佳实践
- 避免硬编码的绝对定位和边距： 原始问题中尝试使用 margin-top: 1300px 和 position: absolute 来调整布局。这种做法极度脆弱，一旦内容或屏幕尺寸变化，布局就会混乱。Flexbox 的设计理念就是提供一种更具弹性和自适应性的布局方式，应尽量避免此类硬编码。
