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

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 flex-flow属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 知识与技能：理解并掌握flex-flow属性的基本概念、作用及常见取值。 · 过程与方法：通过案例分析，让学生了解flex-flow属性在弹性盒子布局中的应用，并学会解决实际问题。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. flex-flow属性的基本概念和作用。 2. flex-flow属性的常见取值及其效果。 教学难点 如何根据实际需求选择合适的flex-flow属性值，以及如何处理弹性项目的排列和换行问题。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过实际案例，让学生更好地理解flex-flow属性的应用场景和效果。 2. 实践操作法：让学生亲自动手操作，加深对知识点的理解和掌握。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，提高团队协作能力。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾弹性盒子布局的基本概念和布局方法。 2. 介绍flex-flow属性的概念及其在弹性盒子布局中的作用。 2分钟 讲授新课 练习指导 flex-flow属性是CSS中的一个属性，用于控制弹性盒子（flexbox）中弹性项目的排列方向和换行行为。以下是关于flex-flow属性的基本概念和作用以及常见取值及其效果的详细介绍： 一、flex-flow属性的基本概念和作用 flex-flow属性用于控制弹性项目的排列方向和换行行为。它是一个简写属性，可以同时设置`flex-direction`和`flex-wrap`属性的值。 二、flex-flow属性的常见取值及其效果 1. `<flex-direction> <flex-wrap>`：其中`<flex-direction>`表示弹性项目的排列方向，取值有`row`、`row-reverse`、`column`、`column-reverse`；`<flex-wrap>`表示弹性项目的换行行为，取值有`nowrap`、`wrap`、`wrap-reverse`。 ```css .container { flex-flow: row wrap; } ``` 2. `<flex-direction>`：表示弹性项目的排列方向。 - `row`（默认值）：弹性项目沿水平方向排列。 - `row-reverse`：弹性项目沿水平方向反向排列。 - `column`：弹性项目沿垂直方向排列。 - `column-reverse`：弹性项目沿垂直方向反向排列。 ```css .container { flex-flow: row; } ``` 3. `<flex-wrap>`：表示弹性项目的换行行为。 - `nowrap`（默认值）：弹性项目不换行，超出容器宽度时会溢出。 - `wrap`：弹性项目超出容器宽度时自动换行。 - `wrap-reverse`：弹性项目超出容器宽度时自动换行，且换行方向与`wrap`相反。 ```css .container { flex-flow: wrap; } ``` 通过设置不同的flex-flow属性值，可以实现弹性盒子中弹性项目的不同排列方向和换行行为。在实际应用中，可以根据需求灵活调整flex-flow属性值，以实现更丰富的布局效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 设计一个弹性盒子布局，要求项目沿水平方向排列，且超出容器宽度时自动换行。 2. 在一个具有固定宽度和高度的容器中，使用flex-flow属性实现项目沿垂直方向排列，且超出容器高度时自动换行。 12分钟 布置作业 1. 设计一个弹性盒子布局，要求项目沿水平方向排列，且超出容器宽度时自动换行。 2. 在一个具有固定宽度和高度的容器中，使用flex-flow属性实现项目沿垂直方向排列，且超出容器高度时自动换行。 1分钟 总结回顾 1. flex-flow属性的基本概念和作用。 2. flex-flow属性的常见取值及其效果。 3. 如何根据实际需求选择合适的flex-flow属性值，以及处理弹性项目的排列和换行问题。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$