第8章 使用Flex实现网页响应式布局
课程名称
Web前端开发
项目名称
使用Flex布局实现
网页响应式布局
任务名称
使用Flex布局实现网页响应式布局
课时
6
项目性质
□演示性    □验证性    □设计性    √综合性
授课班级
授课日期
授课地点
教学目标
能力目标：
1. 具备应用Flex实现响应式布局的能力
2. 具备灵活运用Flex的能力
知识目标：
1. 掌握响应式布局的基础知识
2. 掌握Flex布局的基本语法
3. 掌握运用Flex布局实现各种响应式布局的方法
素质目标：
1. 培养学生信息搜集能力
2. 培养学生团结合作、互帮互助的能力
教学内容
1. 任务描述
2. 任务展示与实现
（1）创建响应式布局的基本结构
（2）实现云景旅游公司首页Flex布局
（2）学生动手操作
3. 教师讲解本任务涉及的知识点
4. 任务小结
教学重点
1. 响应式布局基础知识
2. Flex实现响应式网页
教学难点
1. Flex基本语法
2. Flex实现响应式网页
教学准备
1. 装有Sublime或者Hbuilder的电脑
2. 教学课件PPT
3. 教材：《Web前端技术项目式教程》
作业设计
使用Flex实现游公司二级页面“公司概况”的响应式效果。
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程
说明
【课前说明】
分别从响应式布局基础知识、Flex语法基础，掌握响应式网页的实现方法。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。掌握Flex布局的基础，掌握使用Flex实现响应式网页的方法。
课程
内容
描述
一、响应式布局基础
无论使用Flex布局还是Bootstrap框架实现响应式网页，都必须首先掌握响应式布局的基础知识，主要包括：viewport设置、百分比宽度布局、相对大小字体、弹性图片、媒体查询，下面逐一进行介绍。
二、Flex布局
采用Flex布局的元素，简称“容器”。它的所有子元素自动成为容器成员，简称“项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）为main start，结束位置为main end；交叉轴的开始位置为cross start，结束位置为cross end。项目默认沿主轴排列。单个项目占据的主轴空间为main size，占据的交叉轴空间为cross size。
（1）容器的属性
Flex布局的语法一共包含12个属性，其中，6个设置在容器上，6个设置在项目上。下面先介绍设置在容器上的属性：flex-direction属性、flex-wrap属性、flex-flow属性、justify-content属性、align-items属性、align-content属性。
（2）项目的属性
另外6个属性设置在项目上：order属性、flex-grow属性、flex-shrink属性、flex-basis属性、flex属性、align-self属性。
课堂
实训
同步训练：使用Flex实现云景旅游公司首页响应式布局
1. 实现首页头部响应式效果
手机端页面最终的显示效果是：Logo、导航、导航项、搜索表单全部居中。
云景旅游手机端页面头部Flex代码
1  .logo{
2    display: flex;
3    justify-content: center;         
4  }
5  nav ul li{
6    display: flex;
7    justify-content: center;             
8  }
9  .navbar form {                           
10    display: flex;                           
11  }
12  .navbar input {                       
13    flex-grow: 1;                 
14  }
云景旅游PAD端页面头部Flex代码
1  @media(min-width:768px){
2    nav ul{
3      display: flex;                     
4      }
5    nav{
6      display: flex;                     
7      justify-content: center;                   
8    }
9  }
flex布局对齐方式云景旅游桌面端页面头部Flex代码
1  @media(min-width:992px){
2    header{
3      display: flex;               
4    }
5    .navbar{
6      display: flex;       
7      flex: 1;                       
8      justify-content: space-between;     
9    }
10    .navbar input{
11      flex-grow: 0;                    /
12    }
13  }
2. 主体内容.main_top区域实现
.top区域Flex代码
1  .top{
2    display: flex;                     
3  }
4  .top_left{                 
5    flex: 1;                         
6    display: flex; 
7    align-items: center;
8  }
9  .top_right{
10    flex: 1;
11  }
.bottom区域Flex代码
1  .bottom{
2    display: flex;
3  }
4  .col{
5    flex: 1;
6  }
3. 主体内容.main_middle区域实现
.main_middle区域包含两个.jingqu部分，两部分代码相同，此处只列举其中一个部分代码。
.jingqu区域Flex代码
1  .jingqu{
2    display: flex;
3  }
4  .jingqu .transbox{
5    flex: 2;
6  }
7  .jingqu_img{
8    flex: 5;
9  }
10  .jingqu_img ul{
11    display: flex;
12    flex-wrap: wrap;
13  }
4. 主体内容.main_bottom区域实现
下面详细介绍实现这个区域布局效果的Flex代码。
.main_bottom区域Flex代码
1  .main_bottom{
2    display: flex;
3    align-items: center;
4  }
5  .main_bottom>div{
6    display: flex;
7  }
8  .main_bottom div div{
9    flex: 1;
10  }
Flex实现水平居中和垂直居中
1  .main_bottom div div:first-child p{
2    display: flex;
3    align-items: center;               
4    justify-content: center;           
5  }
5. 实现页脚效果
下面介绍实现网页页脚效果的Flex代码。
Flex实现页脚导航水平排列
footer ul{
    display: flex;
}
Flex实现页脚信息两端对齐
1  footer div p{
2    display: flex;
3    justify-content: space-between;
4  }
总结
评价
通过学习，学生能够掌握响应式布局的基本原理方法，掌握使用Flex实现响应式布局的基本方法。
本节课主要运用案例教学法，通过使用Flex实现云景旅游公司首页响应式效果。深入理解响应式网页的实现方法，通过实例的方法加强对实现响应式网页的理解，达到能够独立熟练运用Flex解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式 ，促进学生的自主、创新学习的方式 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。