微信小程序开发 教案 4.3 教案-项目属性.docx

第4章flex布局任务4.3项目属性课时内容项目属性课时4教学目标掌握order属性的用法；掌握flex-shrink属性的用法；掌握flex-grow属性的用法；掌握flex-basis属性的用法；掌握align-self属性的用法；使用项目属性设置小程序中项目的位置、对齐方式等。教学重难点掌握order属性的用法；掌握flex-shrink属性的用法；掌握flex-grow属性的用法；掌握flex-basis属性的用法；掌握align-self属性的用法；使用项目属性设置小程序中项目的位置、对齐方式等。教学设计1 .教学思路:介绍项目的 6 个属性：order> flex-shrink> flex-grow> flex-basis> flex 和align-selfo通过多媒体演示和实机操作讲解微信小程序容器中order、flex-shrink> flex-grow> flex-basis、flex和align-self等项目属性的使用;通过小程序实战巩固基 础知识。2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍项目的 6 个属性:order> flex-shrink> flex-grow> flex-basis> flex 和 align-self。本节的学习目标：(1)熟练掌握。rder属性的用法；(2)熟练掌握flex-shrink属性的用法；(3)熟练掌握flex-grow属性的用法；(4)熟练掌握flex-basis属性的用法；(5)熟练掌握align-self属性的用法；(6)掌握使用项目属性设置小程序中项目的位置、对齐方式等。以下介绍各项目属性的程序编写。二、导入新知1. order 属性order属性主要用于设置项目在主轴方向上的排列顺序，该属性值为整数，值越小，排 列越靠前，其语法格式如下：.itemorder: 0 （默认值）I <integer>）主轴>啖目A喷目B唉目Corder： -1 order： 2 order： 6交叉油2. flex-shrink 属性flex-shrink属性主要用于设置项目收缩因子，当项目在主轴方向上溢出时，通过项目收 缩因子规定的比例压缩项目以适应容器，其语法格式如下：.items flex-shrink： 1 （默认值）|number,）flex-shrink属性的值为项目的收缩因子，只能是非负数。当项目在主轴方向上溢出时, 项目尺寸的收缩公式如下：最终长度=原长度义（1-溢出长度-收缩因子/压缩总权重）注意：当遇到小数时向下取整，不进行四舍五入。压缩总权重的计算公式如下：压缩总权重=长度1 X收缩因子1+长度2X收缩因子2+ 一 +长度NX收缩因子N注意：当主轴在水平方向上时，长度指的是宽度；当主轴在垂直方向上时，长度指的 是高度。容器width： 500px主轴 溢出lOOpxABC交叉轴width： 200pxwidth： 200Px width： 200Px交叉轴ABCwidth： 181Px widths 166Px width： 153pxK器width： 500px主轴(b)项目在压缩后（a）项目在压缩前flex-grow 属性flex.grow属性主要用于设置项目扩张因子，当项目在主轴方向上还有剩余空间时，通 过设置项目扩张因子对剩余空间进行分配，其语法格式如下：.itemflex-grow: 0 （默认值）I <number>）flex.grow属性的值为项目的扩张因子，只能是非负数。当项目在主轴方向上还有剩余 空间时，项目尺寸的扩张公式如下：最终长度=原长度+扩张单位X扩张因子注意：当遇到小数时向下取整，不进行四舍五入。其中，扩张单位的计算公式如下：扩张单位=剩余空间/（扩张因子1+扩张因子2+扩张因子N）注意：当主轴在水平方向上时，长度指的是宽度；当在垂直方向上主轴时，长度指的 是高度。主轴容器width： 600Px容ahddrhi 600px主轴ABCABC交叉轴利余空何宽度300Px交叉轴（a）项目在扩张前（b）项目在扩张后3. flex-basis 属性flex-basis属性主要用于根据主轴方向代替项目的宽度或高度属性，具体说明如下：当容器设置flex-direction属性的值为row或row-reverse时，如果项目的flex-basis属 性和width属性同时存在数值，则使用flex-basis属性代替width属性。当容器设置flex-direction属性的值为column或column-reverse时，如果项目的flexbasis 属性和height属性同时存在数值，则使用flex-basis属性代替height属性。flex-basis属性的语法格式如下：.itemflex-basis： auto （默认值）| <number> px）需要注意的是，数值比auto的优先级更高，如果flex-basis属性值为auto,而width或 height属性值是数值，则采用数值作为最终属性值。主轴widtht lOOpx flex-basis： 2OOpxwidth： lOOpxwidth： lOOpxalign-self 属性flex属性是flex-grow、flex-shrink、flex-basis的简写方式，其语法格式如下:flex:none | auto | flex-grow flex-shrinkflex-basis）将flex属性的值设置为none,等价于OOauto；将flex属性的值设置为auto,等价于11 autOoalign-self属性主要用于设置项目在行中交叉轴方向上的对齐方式，从而覆盖容器的 align-items属性值，这么做可以对项目的对齐方式做特殊处理。align-self属性的语法格式 如下：align-self： auto （默认值）| flex-start | center | flex-end | baselinelstretchalign-self属性的默认值为auto,表示继承容器的align-items属性值。如果容器没有设置align-items属性的值，那么align-self属性的默认值auto表示stretch0主轴交叉轴三、实现效果以align-self属性为例，根据任务描述，可以做出如图所示的效果。WeCIwtT 1014urn KBSH ®项目属性 flex-grow :L巴L国血 M 而国otg M 3ln* ，9 90M Re* b«ut *90 wfl四、任务实现以align-self属性为例，介绍上述实现效果的任务实现。(1)编写alignSelf.wxml文件中的代码。在alignSelf.wxml文件中包含3个蓝色的矩形 块，通过设置align-self属性，可以设置项目在行中交叉轴方向上的对齐方式，从而覆盖容 器的 align-itemsoalignSelf.wxml文件中的代码如下：alignSelf.wxml-)<view class-'title 1 "> 项目属性 </view><viewclass="title2n>flex-growr<view><view class-'my-Contianer'><iew class=Mdemo An>A<vdew>view clash demo B">B< view)<-iew class=Mdemo CM>C<dew><*iew class=Mdemo D">D< view)<view>(2)编写alignSelf.wxss文件中的代码。该文件中定义了 title标题样式、myContainer容 器属性样式和demo矩形块的样式。通过设置align-self属性设置项目在行中交叉轴方向 上的对齐方式，从而覆盖容器的align-items属性。alignSelf.wxss代码如下：/* alignSelfwxss */ .mvContianerborder: Ipx solid silver;width: 700rpx;height: 600rpx: margin: Orpx auto: display: flex;fl ex-dir ection: row;).title 1 font-size: 25px;text-align: center:margin: 15pxi cdor: darkred:.title2font-size: 20px:text-align: center:margin: 15px:).demo(width: 150rpx;text-align: center;margin: 15rpx:border: Ipx solid;backgroimd-color: lightblue: ).A( height: lOOrpx; align-self: flex-start;B(height: lOOrpx; align-self: center;)C(height: lOOrpx; align-self: flex-end:) D align-self: stretch:)练习