first commit

data/Web/9.md

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