logo

Flexbox 布局：三张卡片

✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset

About This Exercise

在这个实验中，你将学习使用 CSS Flexbox 创建一个专业的卡片布局。

Flexbox 是现代网页布局的核心技术之一，掌握它可以让你轻松实现各种复杂布局。

你将学到：

  • 如何使用 display: flex 创建弹性容器
  • 如何使用 gap 控制元素间距
  • 如何使用 justify-content 分布空间
  • 如何使用媒体查询实现响应式布局
Beginner⏱ 15-20 min

Learning Objectives

  • 理解 Flexbox 容器和项目的关系
  • 掌握 display: flex 的基本用法
  • 学会使用 gap 和 justify-content 控制布局
  • 实现移动端响应式布局

Scenario

你是一名前端开发者，需要为 JR Academy 的课程页面创建一个产品卡片展示区域。 设计要求： - 桌面端：三张卡片并排显示，均匀分布 - 移动端：卡片垂直堆叠，易于滚动浏览 - 卡片之间需要有适当的间距 - 整体布局居中且有内边距

Why Do This

  • CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
  • Clarify the box model and layout rules first, then add visual polish — less rework that way.
  • Writing styles as reusable patterns is more valuable than tweaking a single page.

Hands-on Practice

  • Write the layout skeleton first (display/gap/align), then add colors and shadows.
  • Extract repeated styles into reusable classes.
  • Use validation rules to reverse-engineer the design intent of your current styles.

Common Mistakes

  • Adding margin after margin to fix positioning while ignoring layout containers.
  • Selectors nested too deep, causing style coupling.
  • Only caring about how it looks without considering maintainability.

Deliverable

A reusable component style template (layout rules + visual rules + naming conventions).

My Progress

Completed Steps0 / 3
Total Attempts0
Best Score0%

Completion Criteria (Checkable)

Confirm before completing this Lab

Reflection Questions (Recommended)

What was your main layout decision? Why did you choose it?

What change did you make specifically for maintainability?

What would you prioritize improving next time?

Tags

CSSFlexboxResponsiveLayout