Web前端技术项目式教程课件 任务八 使用Flex实现网页响应式布局

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）任务八

使用Flex实现网页响应式布局知识目标1了解响应式布局基础知识。2熟悉CSS3弹性布局（Flex）的基本语法。能力目标1学会使用CSS3弹性布局设计网页。素质目标1培养学生对中华优秀传统文化的深刻理解和认同。2培养学生遵守行业标准（如W3C规范）的习惯。思维导图任务描述随着移动设备的普及，一个网站能够兼容不同显示终端的响应式网页成为主流。学校希望李明将首页重构为个人计算机（PersonalComputer，PC）、平板计算机和手机端全部兼容的网页。本任务的要求是使用Flex将中华传统文化网站首页重构为响应式页面。知识引入1.响应式布局基础知识2.Flex布局

1.响应式布局基础知识（1）viewport设置首先，在网页代码的头部，加入一行代码。<metaname="viewport"content="width=device-width",initial-scale="1"/>上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1），即网页初始大小占屏幕面积的100%。1.响应式布局基础知识（2）百分比宽度布局由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，只能使用百分比宽度。例如：width:x%或者width:auto。1.响应式布局基础知识（3）相对大小字体使用em或者rem为单位设置网页字体大小。①相对长度单位em。em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。②相对长度单位rem。rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。1.响应式布局基础知识（4）弹性图像所谓弹性图片，当屏幕大小发生变化的时候，图片能够根据屏幕尺寸的变化等比例缩放，代码如下。img{max-width:100%;}1.响应式布局基础知识（5）媒体查询媒体查询是实现响应式网页的关键因素，它的核心思想是：根据设备显示器的变化应用不同的CSS样式。2.Flex布局传统的网页布局方法基于盒模型，依赖display属性、position属性以及float属性，因此要实现特殊布局非常不方便。例如，页面垂直居中就不容易实现。Flex布局则可以简便、完整、响应式地实现各种页面布局。2.Flex布局（1）Flex布局的定义Flex是FlexibleBox的缩写，意为“弹性布局”，任何一个容器都可以指定为Flex布局，示例代码如下。.box{display:flex;}2.Flex布局（2）Flex布局的基本概念采用Flex布局的元素，简称“容器”。它的所有子元素自动成为容器成员，简称“项目”。容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis）。主轴的开始位置（与边框的交叉点）为mainstart，结束位置为mainend；交叉轴的开始位置为crossstart，结束位置为crossend。2.Flex布局（2）Flex布局的基本概念项目默认沿主轴排列。单个项目占据的主轴空间为mainsize，占据的交叉轴空间为crosssize。如下图所示。2.Flex布局（3）容器的属性Flex布局的语法一共包含12个属性，其中，6个设置在容器上，6个设置在项目上。下面先介绍设置在容器上的属性：flex-direction属性、flex-wrap属性、flex-flow属性、justify-content属性、align-items属性、align-content属性。2.Flex布局（3）容器的属性①flex-direction属性。flex-direction属性决定主轴的方向（即项目的排列方向），语法如下。flex-direction:row|row-reverse|column|column-reverse;2.Flex布局（3）容器的属性②flex-wrap属性。默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义一条轴线排不下时换行的方式，语法如下。flex-wrap:nowrap|wrap|wrap-reverse;2.Flex布局（3）容器的属性③flex-flow属性。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap，语法如下。flex-flow:<flex-direction>||<flex-wrap>;2.Flex布局（3）容器的属性④justify-content属性。justify-content属性定义了项目在主轴上的对齐方式，语法如下。justify-content:flex-start|flex-end|center|space-between|space-around2.Flex布局（3）容器的属性⑤align-items属性。align-items属性定义项目在交叉轴上如何对齐，语法如下。align-items:flex-start|flex-end|center|baseline|stretch;2.Flex布局（3）容器的属性⑥align-content属性。align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，语法如下。align-content:flex-start|flex-end|center|space-between|space-around|stretch;2.Flex布局（4）项目的属性另外6个属性设置在项目上：order属性、flex-grow属性、flex-shrink属性、flex-basis属性、flex属性、align-self属性。①order属性。order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，语法如下。order:<integer>;2.Flex布局（4）项目的属性②flex-grow属性。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，语法如下。flex-grow:<number>;2.Flex布局（4）项目的属性③flex-shrink属性。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，语法如下。flex-shrink:<number>;2.Flex布局（4）项目的属性④flex-basis属性。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小，语法如下。flex-basis:<length>|auto;2.Flex布局（4）项目的属性⑤flex属性。flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。该属性有两个快捷值：auto(11auto)和none(00auto)。2.Flex布局（4）项目的属性⑥align-self属性。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch，语法如下。align-self:auto|flex-start|flex-end|center|baseline|stretch;任务实现：使用Flex布局重构中国传统文化网站首页1.

实现响应式图像首先，在全局样式base.css中添加实现图片为响应式的代码。img{max-width:100%;display:block;}任务实现：使用Flex布局重构中国传统文化网站首页2.

设置怪异模式计算容器宽度在全局样式中，设置网页所有元素按照怪异模式计算宽度。*{ box-sizing:border-box;}3.

弹性文字网页中所有字体的大小均使用rem为单位，示例如下。html{font-size:10px;}任务实现：使用Flex布局重构中国传统文化网站首页body{font-size:1.4rem;font-family:"微软雅黑";line-height:1.8;}4．清除超链接下划线a{text-decoration:none;}任务实现：使用Flex布局重构中国传统文化网站首页5.媒体查询媒体查询的原理是根据断点应用不同的样式。断点就是网页样式发生变化的设备宽度值。中国传统文化网站响应式代码有两个断点：768像素和992像素。媒体查询语句如下。@media(min-width:768px){……}@media(min-width:992px){……}任务实现：使用Flex布局重构中国传统文化网站首页6.

实现首页头部响应式效果手机端页面最终的显示效果是：Logo、导航、导航项、搜索表单全部居中。任务实现：使用Flex布局重构中国传统文化网站首页7．主体内容.main_top区域的实现手机端所有内容都是至上而下排列的。任务实现：使用Flex布局重构中国传统文化网站首页8.

主体内容.main_middle区域实现手机端该区域的内容仍然至上而下排列。任务实现：使用Flex布局重构中国传统文化网站首页9.

主体内容.main_bottom区域实现手机端该区域的内容仍然自上而下排列。任务实现：使用Flex布局重构中国传统文化网站首页10.

实现页脚区域效果页脚区域在手机端、平板端和PC端的呈现效果是完全相同的。任务实现：使用Flex布局重构中国传统文化网站首页任务拓展：使用