4.7 KiB
4.7 KiB
校园活动网站——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 布局五步。 |
用动态演示检验真实适配效果，将属性知识转化为布局方法。 |
板书设计
Flex 布局
容器：display: flex
项目：容器的直接子元素
主轴：justify-content
交叉轴：align-items
换行：flex-wrap
间距：gap
步骤：找父容器 → 定轴向 → 排列 → 对齐 → 测试
教学成效与反思
| 教学成效 | 学生能够识别 Flex 容器与项目，使用换行、间距和对齐属性完成活动列表。多数学生通过增删卡片和改变窗口宽度验证了布局弹性。 |
| 教学反思 | 主轴与交叉轴仍易混淆，尤其在方向改为纵向后。应坚持每次设置对齐前先画箭头判断轴向，并减少同时修改多个属性，便于观察因果关系。 |