《响应式开发技术》课件——2.2 flex布局基础-flex-direction属性.pptxVIP

响应式开发技术主讲人：

flex布局子项常见属性学习情境五

教学内容与过程环节1任务引入与分析探究回顾知识：flex布局原理：通过给父容器添加flex属性，来控制子容器的位置和排列方式

教学内容与过程环节2知识讲解与演示操作任务1：知识点拨1.主轴侧轴在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴默认主轴方向就是x轴方向，水平向右默认侧轴方向就是y轴方向，水平向下flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

教学内容与过程环节3知识讲解与演示操作任务1：知识点拨2.flex-direction属性值flex-direction属性决定主轴的方向（即项目的排列方向）属性值说明row默认值从左到右row-reverse从右到左column从上到下column-reverse从下到上

教学内容与过程环节3知识讲解与演示操作任务1：知识点拨主轴为Y轴时属性值为column属性值为column-reverse

教学内容与过程环节3知识讲解与演示操作任务2：效果分析【flex-direction属性的简单运用】

教学内容与过程环节3知识讲解与演示操作任务2：效果分析display：flexflex-direction

教学内容与过程环节3知识讲解与演示操作任务3：代码实现【步骤演示】1.搭建结构

教学内容与过程环节3知识讲解与演示操作任务3：代码实现【步骤演示】1.搭建结构2.父容器、子容器设置样式

教学内容与过程环节3知识讲解与演示操作任务3：代码实现【步骤演示】1.搭建结构2.父容器、子容器设置样式3.父容器设置主轴方向

教学内容与过程环节4学生实践操作任务1：新建站点与网页任务2：添加元素结构任务3：设置标记属性任务4：网页预览、调试任务5：保存、提交作业

教学内容与过程环节5总结、评价本节小结教学评价Flex-direction学习通课中完成

教学内容与过程环节6布置作业、预习任务作业预习完成flex-direction案例的样式美化flex-wrap属性