Flexbox 布局：三张卡片
✏️ 可编辑
加载编辑器...
实时预览
⌘+Enter 运行⌘+R 重置
关于此练习
在这个实验中，你将学习使用 CSS Flexbox 创建一个专业的卡片布局。
Flexbox 是现代网页布局的核心技术之一，掌握它可以让你轻松实现各种复杂布局。
你将学到：
- 如何使用
display: flex创建弹性容器 - 如何使用
gap控制元素间距 - 如何使用
justify-content分布空间 - 如何使用媒体查询实现响应式布局
入门⏱ 15-20 min
学习目标
- 理解 Flexbox 容器和项目的关系
- 掌握 display: flex 的基本用法
- 学会使用 gap 和 justify-content 控制布局
- 实现移动端响应式布局
场景说明
你是一名前端开发者，需要为 JR Academy 的课程页面创建一个产品卡片展示区域。
设计要求：
- 桌面端：三张卡片并排显示，均匀分布
- 移动端：卡片垂直堆叠，易于滚动浏览
- 卡片之间需要有适当的间距
- 整体布局居中且有内边距
为什么这么做
- CSS 的本质是“约束布局与视觉层级”，不是背属性。
- 先明确盒模型与布局规则，再做视觉修饰，返工更少。
- 把样式写成可复用模式，比单页面调参更有价值。
动手练习
- 先写布局骨架（display/gap/align），再写颜色和阴影。
- 把重复样式提炼为可复用 class。
- 用验证规则反推你当前样式的设计意图。
常见误区
- 靠不断加 margin 修位置，忽略布局容器。
- 选择器过深，导致样式耦合。
- 只关注“看起来像”，没有可维护性。
本节交付物
一份可复用的组件样式模板（布局规则 + 视觉规则 + 命名约定）。
我的进度
完成步骤0 / 3
总尝试次数0
最佳分数0%
达标标准（可勾选）
完成当前 Lab 前建议确认
反思题（建议完成）
你这次的布局主决策是什么？为什么这么选？
你做了哪一处“为可维护性服务”的改动？
下一次你优先想优化哪部分？
标签
CSSFlexboxResponsiveLayout