# 校园活动网站——Flex弹性布局 教学设计
| **课题** | **校园活动网站——Flex弹性布局** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解 Flex 容器、项目、主轴和交叉轴，掌握 `display: flex`、排列、对齐、换行和间距等常用属性。
**技能目标**：能够将校园活动列表从纵向堆叠改为可换行的弹性布局，并完成不同数量卡片的对齐测试。
**素养目标**：培养根据布局目标选择工具、通过控制变量观察效果的实验意识，形成适配内容变化的弹性设计思维。 |
| **教学重难点** | **重点**：容器与项目关系；主轴和交叉轴；`justify-content`、`align-items`、`flex-wrap`、`gap`。
**难点**：根据 `flex-direction` 判断轴向，区分主轴排列与交叉轴对齐。 |
| **教学资源准备** | 校园活动网站项目、Flex 轴向图、属性效果卡、活动卡片 HTML 素材、浏览器开发者工具。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 排列需求导入**
（5分钟） | 分析活动条目纵向堆叠造成空间利用低的问题，提出多卡片排列任务。 | **场景演示**
增加活动数量，展示普通文档流下的页面，提问如何让卡片自动横排并在空间不足时换行。
**任务发布**
明确本课完成活动列表弹性布局。 | **问题观察**
描述现有排列的不足和理想效果。
**方案猜想**
思考需要控制父区域还是逐个移动卡片。 | 以内容数量变化制造真实布局需求，引出容器统一控制的价值。 |
| **2. Flex原理探究**
（10分钟） | 认识 Flex 容器、项目、主轴、交叉轴及方向变化。 | **图示讲解**
在轴向图上标注容器和项目，切换 `row` 与 `column` 展示主轴变化。
**属性实验**
使用开发者工具开启 Flex 标识，实时调整主轴排列和交叉轴对齐。 | **轴向判断**
根据四张布局图指出主轴和交叉轴。
**效果预测**
修改属性前先预测卡片位置，再观察结果。 | 用图示、预测和实时结果建立轴向概念，减少属性死记硬背。 |
| **3. 常用属性示范**
（8分钟） | 学习换行、间距、对齐及卡片基础宽度控制。 | **代码演示**
为活动列表设置 `display: flex`、`flex-wrap: wrap` 和 `gap`，比较不同 `justify-content`。
**边界测试**
删除或增加卡片，观察布局能否自动调整。 | **跟随编码**
把活动列表设为 Flex 容器，调整间距与对齐。
**变化测试**
使用三张、四张、五张卡片验证排列。 | 强调布局应适应内容变化，让学生理解弹性布局不是固定摆放。 |
| **4. 活动列表实践**
（13分钟） | 完成活动卡片横向排列、自动换行和整齐对齐。 | **任务分层**
基础任务实现横排换行；进阶任务设置卡片弹性宽度并保持最小可读尺寸。
**巡回指导**
针对把属性写在子元素、轴向判断错误和固定宽度过大进行点拨。 | **布局开发**
完成活动列表样式，调整 `gap`、对齐方式和卡片宽度。
**窗口测试**
拖动浏览器宽度，记录卡片从三列到两列或一列的变化。 | 通过分层任务兼顾差异，让学生在真实窗口变化中验证弹性布局。 |
| **5. 成果评价总结**
（4分钟） | 展示不同宽度下的页面，归纳 Flex 布局步骤。 | **作品点评**
选择能自然换行、间距统一的作品，指出过度固定宽度的问题。
**步骤梳理**
总结“找父容器—定方向—排主轴—对交叉轴—测变化”。 | **成果演示**
拖动窗口展示布局变化并说明一项属性。
**口诀归纳**
复述 Flex 布局五步。 | 用动态演示检验真实适配效果，将属性知识转化为布局方法。 |
## 板书设计
```text
Flex 布局
容器：display: flex
项目：容器的直接子元素
主轴：justify-content
交叉轴：align-items
换行：flex-wrap
间距：gap
步骤：找父容器 → 定轴向 → 排列 → 对齐 → 测试
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够识别 Flex 容器与项目，使用换行、间距和对齐属性完成活动列表。多数学生通过增删卡片和改变窗口宽度验证了布局弹性。 |
| **教学反思** | 主轴与交叉轴仍易混淆，尤其在方向改为纵向后。应坚持每次设置对齐前先画箭头判断轴向，并减少同时修改多个属性，便于观察因果关系。 |