本教程将详细指导如何利用 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 笔记
27 查看详情
Flexbox 复杂布局示例 页面顶部大标题
这是第二行的左侧区块，占据 80% 宽度。
可以放置主要内容。
右侧上半部分内容
右侧下半部分内容
这是第三行的左侧区块，占据 50% 宽度。
这是第三行的右侧区块，占据 50% 宽度。
页面底部大标题
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 的设计理念就是提供一种更具弹性和自适应性的布局方式，应尽量避免此类硬编码。
以上就是使用 CSS Flexbox 实现复杂多行多列布局教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/615653.html
微信扫一扫 
支付宝扫一扫 
