第22篇：Flexbox 实战布局模式-171主机测评

第22篇：Flexbox 实战布局模式

掌握了 Flexbox 的容器属性和项目属性后，本篇将通过一系列经典实战案例，演示如何用 Flexbox 解决真实开发中的布局问题。每个模式都附带完整代码和原理解析。

学习目标

学会用 Flexbox 实现完美居中
学会用 Flexbox 实现等高卡片布局
学会用 Flexbox 实现粘性页脚
学会用 Flexbox 实现响应式导航栏
学会用 Flexbox 实现侧边栏布局
学会用 Flexbox 实现底部固定操作栏

核心知识点

模式 1：完美居中

最经典的 Flexbox 用法，一行代码解决垂直水平居中。

.center {
display: flex;
justify-content: center; /* 主轴居中 */
align-items: center; /* 交叉轴居中 */
min-height: 100vh; /* 全屏高度 */
}

这是现代 CSS 中最推荐的居中方案，替代了传统的 position: absolute + transform 方案。

模式 2：固定侧边栏 + 自适应主内容

.layout {
display: flex;
min-height: 100vh;
}

.sidebar {
flex: none; /* 不伸缩 */
width: 240px;
background: #f9fafb;
}

.main {
flex: 1; /* 占据剩余空间 */
padding: 24px;
}

模式 3：粘性页脚（Sticky Footer）

当页面内容不足时，页脚固定在底部；内容多时，页脚随内容推下去。

body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}

.header, .footer {
flex: none; /* 固定高度 */
}

.main {
flex: 1; /* 占据剩余空间 */
}

模式 4：响应式导航栏

.nav {
display: flex;
align-items: center;
gap: 24px;
padding: 0 24px;
height: 60px;
}

.nav .logo {
flex: none; /* Logo 固定 */
}

.nav .links {
display: flex;
gap: 24px;
margin-left: auto; /* 推到右侧 */
}

/* 移动端汉堡菜单 */
@media (max-width: 768px) {
.nav .links {
display: none; /* 简化示例 */
}
}

margin-left: auto 是一个 Flexbox 小技巧：将元素推到容器的另一侧。

模式 5：等高卡片

.card-list {
display: flex;
gap: 16px;
}

.card {
flex: 1;
display: flex;
flex-direction: column;
}

.card .content {
flex: 1; /* 内容区拉伸，推动按钮到底部 */
}

嵌套使用 flex：外层让卡片等高，内层让按钮对齐底部。

模式 6：底部固定操作栏

.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.page .content {
flex: 1;
padding: 24px;
}

.page .actions {
position: sticky;
bottom: 0;
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
background: white;
border-top: 1px solid #e5e7eb;
}

模式 7：图片网格（自动换行）

.image-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.image-grid img {
flex: 1 1 200px; /* 可伸缩，基础 200px */
height: 200px;
object-fit: cover;
border-radius: 8px;
}

flex: 1 1 200px 让图片在 200px 基础上伸缩，配合 flex-wrap: wrap 实现响应式网格。

模式 8：表单标签对齐

.form-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}

.form-row label {
flex: none;
width: 80px;
text-align: right;
}

.form-row input {
flex: 1;
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 6px;
}

模式 9：步骤条/时间轴

.steps {
display: flex;
align-items: center;
gap: 8px;
}

.step {
flex: none;
display: flex;
align-items: center;
gap: 8px;
}

.step-line {
flex: 1;
height: 2px;
background: #e5e7eb;
}

.step-line.active {
background: #4a90d9;
}

模式 10：分离对齐（space-between + 内部 flex）

.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e5e7eb;
}

.list-item .left {
display: flex;
align-items: center;
gap: 12px;
}

.list-item .right {
display: flex;
align-items: center;
gap: 8px;
}

列表项的左右两部分各自使用 flex，整体用 space-between 分离。

动手练习

练习 1：登录页面

实现一个居中登录卡片：

页面全屏垂直水平居中
登录卡片包含表单和按钮
表单项标签右对齐

练习 2：后台管理布局

实现一个后台管理页面：

顶部固定导航栏
左侧固定侧边栏 220px
右侧主内容自适应
页脚在内容不足时固定在底部

练习 3：商品卡片列表

实现一个商品卡片网格：

使用 Flexbox 换行布局
卡片等高，图片在上，按钮在下
不同长度描述不影响对齐

常见误区 ⚠️

误区真相

“Flexbox 适合所有布局”	Flexbox 擅长一维布局（行或列），二维布局应使用 Grid
“flex-wrap: wrap 可以替代 Grid”	可以处理简单场景，但 Grid 在复杂二维布局中更强大
“margin: auto 在 flex 中无效”	有效！且非常有用，可以将元素推到对侧
“Flexbox 会自动让所有子元素等高”	默认 align-items: stretch 确实会，但如果子元素有显式高度则不会
“嵌套 flex 容器性能差”	现代浏览器优化很好，合理使用不会有性能问题
“gap 在旧浏览器不支持”	IE 不支持，但现代浏览器全部支持，生产环境可放心使用

速查卡片 📋

完美居中

.center {
display: flex;
justify-content: center;
align-items: center;
}

粘性页脚

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }

侧边栏布局

.layout {
display: flex;
}
.sidebar {
flex: none;
width: 240px;
}
.main {
flex: 1;
}

等高卡片

.card-list {
display: flex;
gap: 16px;
}
.card {
flex: 1;
display: flex;
flex-direction: column;
}
.card .content {
flex: 1;
}

分离对齐

.item {
display: flex;
justify-content: space-between;
align-items: center;
}

扩展阅读

MDN: Flexbox 典型用例
CSS-Tricks: Flexbox 布局模式（英文）
web.dev: Flexbox（英文）

📌 配套代码：

CODE/22/flex-patterns.html — 10种经典布局模式演示
CODE/22/flex-dashboard.html — 后台管理布局实战

🎉 下一步：进入第23篇：CSS Grid 基础与轨道定义，学习二维布局系统。

第22篇：Flexbox 实战布局模式