CSS Academy · 课时

常见 Flexbox 布局：导航栏、卡片、媒体对象

Q: 「常见 Flexbox 布局：导航栏、卡片、媒体对象」这节课中我会学到什么？

使用 Flexbox 构建实用的导航栏、卡片网格和媒体对象。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Flexbox 构建实用的导航栏、卡片网格和媒体对象。

第 4 / 4 课13 个步骤

常见 Flexbox 布局：导航栏、卡片、媒体对象 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

为什么弹性盒模式很重要

某些布局模式几乎会出现在每个网页项目中。Flexbox 只需少量 CSS 就能高效解决这些问题。掌握这些模式意味着开发更快、代码更少。

导航栏模式

一种水平导航栏：左侧放置徽标，右侧放置链接：

<nav class="navbar">
  <span class="logo">Brand</span>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
</nav>

居中的主视觉区域

使用 Flexbox 创建全高度居中内容：

<div class="hero">
  <h1>Welcome</h1>
</div>

卡片网格

带有换行和统一间距的响应式卡片网格：

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
</div>

媒体对象

媒体对象是一个基础的用户界面模式：固定宽度的图像旁边放置可伸缩的文本。它常用于评论、社交帖子和列表项目：

<div class="media">
  <img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
  <div class="media-body">
    <strong>Jane Doe</strong>
    <p>Comment text goes here.</p>
  </div>
</div>

使用弹性盒创建粘性页脚

无需设置固定高度，即可将页脚推到页面底部：

<main>Main content that grows to fill available space</main>
<footer>Footer</footer>

图标 + 文本按钮

在按钮中垂直居中图标和文本：

<button class="btn">
  <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
  Download
</button>

使用 Flexbox 创建圣杯布局

三列圣杯布局（页眉、页脚、侧边栏-主要内容-侧边栏）：

<div class="holy-grail">
  <div class="left-sidebar">Left</div>
  <div class="main-content">Main</div>
  <div class="right-sidebar">Right</div>
</div>

带标签的表单行

在表单行中对齐标签和输入框：

<div class="form-row">
  <label>Email</label>
  <input type="email" />
</div>

缩略图图库

使用换行的图像图库：

<div class="gallery">
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>

标签列表

像文本一样流动并自动换行的行内标签：

<div class="tags">
  <span class="tag">CSS</span>
  <span class="tag">Flexbox</span>
  <span class="tag">Layout</span>
</div>

快速检查

在媒体对象模式中，如果文本主体包含很长且无法断开的字符串，是什么阻止它溢出？

在交互式课程中回答

回顾

常见的 Flexbox 模式包括：导航栏（徽标 + 自动外边距 + 链接）、主视觉区域（列布局 + 居中对齐）、媒体对象（固定图像 + 带有 min-width:0 的 flex:1 主体）、粘性页脚（列布局主体 + flex:1 主内容）、卡片网格（换行 + flex:1 1 Xpx）。这五种模式可以满足大多数实际布局需求。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「常见 Flexbox 布局：导航栏、卡片、媒体对象」课时是免费的吗？

是的 — 「常见 Flexbox 布局：导航栏、卡片、媒体对象」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「常见 Flexbox 布局：导航栏、卡片、媒体对象」这节课中我会学到什么？

使用 Flexbox 构建实用的导航栏、卡片网格和媒体对象。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「常见 Flexbox 布局：导航栏、卡片、媒体对象」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy