10.7.6-flex属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 flex属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 知识与技能：理解并掌握flex属性的基本概念、作用及常见取值。 · 过程与方法：通过案例分析，让学生了解flex属性在弹性盒子布局中的应用，并学会解决实际问题。 · 情感态度与价值观：培养学生的自主学习能力、创新思维和解决问题的能力，激发学生对前端开发的兴趣 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. flex属性的基本概念和作用。 2. flex属性的常见取值及其效果。 教学难点 如何根据实际需求选择合适的flex属性值，以及如何处理弹性项目的伸缩问题。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过实际案例，让学生更好地理解flex属性的应用场景和效果。 2. 实践操作法：让学生亲自动手操作，加深对知识点的理解和掌握。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，提高团队协作能力。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾弹性盒子布局的基本概念和布局方法。 2. 介绍flex属性的概念及其在弹性盒子布局中的作用。 2分钟 讲授新课 练习指导 flex属性是CSS中的一个属性，用于控制弹性盒子（flexbox）中弹性项目在主轴方向上的伸缩行为。以下是关于flex属性的基本概念和作用以及常见取值及其效果的详细介绍： 一、flex属性的基本概念和作用 flex属性用于控制弹性项目在主轴方向上的伸缩行为。它可以让弹性项目根据可用空间自动伸缩，从而实现更丰富的布局效果。 二、flex属性的常见取值及其效果 1. `none`（默认值）：项目不伸缩。 ```css .item { flex: none; } ``` 2. `auto`：项目根据可用空间自动伸缩。 ```css .item { flex: auto; } ``` 3.<number>`：项目伸缩的比例值，可以是任意非负数字。 ```css .item { flex: 1; } ``` 4.<number>fr`：项目伸缩的比例值，以分数形式表示可用空间的分配。 ```css .item { flex: 1fr; } ``` 5.<length>`：项目伸缩的具体长度值。 ```css .item { flex: 100px; } ``` 通过设置不同的flex属性值，可以实现弹性盒子中弹性项目的不同伸缩行为。在实际应用中，可以根据需求灵活调整flex属性值，以实现更丰富的布局效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 设计一个弹性盒子布局，要求项目在主轴方向上平均分配可用空间。 2. 在一个具有固定宽度和高度的容器中，使用flex属性实现项目的不等比伸缩。 12分钟 布置作业 1. 完成课后习题练习。 2. 在自己的项目中尝试使用flex属性进行布局优化。 1分钟 总结回顾 1. flex属性的基本概念和作用。 2. flex属性的常见取值及其效果。 3. 如何根据实际需求选择合适的flex属性值，以及处理弹性项目的伸缩问题。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$