10.7.1-弹性盒子设置父元素的display属性值为flex（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 弹性盒子设置父元素的display属性值为flex 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 · 知识与技能：掌握弹性盒子的基本概念，学会设置父元素的display属性值为flex。 · 过程与方法：通过案例分析，让学生了解弹性盒子的布局原理，掌握其布局方法。 · 情感态度与价值观：培养学生 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 知识与技能：掌握弹性盒子的基本概念，学会设置父元素的display属性值为flex。 · 过程与方法：通过案例分析，让学生了解弹性盒子的布局原理，掌握其布局方法。 · 情感态度与价值观：培养学生 教学难点 1. 弹性盒子布局原理的理解。 2. 如何根据实际需求调整弹性盒子的布局。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过实际案例，让学生更好地理解弹性盒子的布局原理和方法。 · 实践操作法：让学生亲自动手操作，加深对知识点的理解和掌握。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾CSS的基本布局方法，如浮动、定位等。 2. 介绍弹性盒子布局的概念及其优势。 2分钟 讲授新课 练习指导 弹性盒子（Flexbox）是一种CSS布局模式，它可以让你更轻松地创建响应式和自适应的布局。以下是关于弹性盒子的基本概念、设置方法和布局原理及方法的详细介绍： 一、弹性盒子的基本概念 弹性盒子布局是一种一维布局模式，它允许容器内的元素在水平或垂直方向上进行排列。弹性盒子布局主要包括两个概念：弹性容器（flex container）和弹性项目（flex item）。 1. 弹性容器：设置了display属性值为flex或inline-flex的元素。它的子元素会自动成为弹性项目。 2. 弹性项目：弹性容器的子元素，它们会根据弹性容器的属性进行布局。 二、设置父元素的display属性值为flex的方法 要将一个容器设置为弹性容器，需要在其CSS样式中设置display属性值为flex或inline-flex。例如： ```css .container { display: flex; } ``` 三、弹性盒子的布局原理及方法 弹性盒子布局的原理是通过将容器分为两个轴：主轴（main axis）和交叉轴（cross axis）。主轴是弹性项目排列的方向，交叉轴是与主轴垂直的方向。弹性盒子布局的方法主要包括以下几个方面： 1. 主轴方向的布局：通过设置弹性容器的`flex-direction`属性，可以控制弹性项目在主轴上的排列方向。可选值有`row`（默认值，从左到右排列）、`row-reverse`（从右到左排列）、`column`（从上到下排列）和`column-reverse`（从下到上排列）。 ```css .container { display: flex; flex-direction: row; } ``` 2. 交叉轴方向的布局：通过设置弹性容器的`align-items`属性，可以控制弹性项目在交叉轴上的对齐方式。可选值有`flex-start`（默认值，顶部对齐）、`flex-end`（底部对齐）、`center`（居中对齐）、`baseline`（基线对齐）和`stretch`（填充整个交叉轴）。 ```css .container { display: flex; align-items: center; } ``` 3. 弹性项目的排列：通过设置弹性项目的`order`属性，可以控制它们在主轴上的排列顺序。数值越小，排列越靠前。 ```css .item1 { order: 1; } .item2 { order: 2; } ``` 4. 弹性项目的尺寸：通过设置弹性项目的`flex-grow`、`flex-shrink`和`flex-basis`属性，可以控制它们在主轴上的尺寸。`flex-grow`表示弹性项目在主轴上的伸展比例，`flex-shrink`表示弹性项目在主轴上的收缩比例，`flex-basis`表示弹性项目在主轴上的基本尺寸。 ```css .item1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0; } .item2 { flex-grow: 2; flex-shrink: 2; flex-basis: 0; } ``` 5. 弹性项目的对齐：通过设置弹性项目的`align-self`属性，可以控制它们在交叉轴上的对齐方式。可选值与`align-items`属性相同。 ```css .item1 { align-self: flex-start; } .item2 { align-self: center; } ``` 通过以上方法，可以实现弹性盒子布局的各种需求。在实际应用中，可以根据需求灵活调整弹性盒子的布局方式，以实现更丰富的布局效果。 10分钟 7分钟 自主学习 8分钟 练习训练 请为以下网页内容设计一个弹性盒子布局方案： · 一个导航栏 · 一个轮播图 · 三个文章列表项 12分钟 布置作业 1. 完成课后习题练习。 2. 在自己的项目中尝试使用弹性盒子布局。 1分钟 总结回顾 1. 弹性盒子的基本概念。 2. 设置父元素的display属性值为flex的方法。 3. 弹性盒子的布局原理及方法。 4. 如何根据实际需求调整弹性盒子的布局。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$