《微信小程序开发 教案 4.2 教案-容器属性.docx》由会员分享，可在线阅读，更多相关《微信小程序开发 教案 4.2 教案-容器属性.docx（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第4章flex布局任务4.2容器属性课时内容容器属性课时4教学目标掌握flex-direction属性的用法；掌握flex-wrap属性的用法；掌握justify-content属性的用法；掌握align-items属性的用法；掌握align-content属性的用法；使用容器属性设置小程序中容器的位置、对齐方式等。教学重难点掌握flex-direction属性的用法； 掌握flex-wrap属性的用法； 掌握justify-content属性的用法； 掌握align-items属性的用法； 掌握align-content属性的用法；教学设计1 .教学思路:介绍容器的 6 个属性:flex-d
2、irection、flex-wrap、flex-flow、justify-content、 align-content align-itemso通过多媒体演示和实机操作讲解微信小程序容器中flexdirection flex-wrap flex-flow justify-content、 align-content align-items 等属性的 使用；通过小程序实战巩固基础知识。2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍容器的 6 7bS： flex-directionflex-wrapflex-flowjustify-contenta
3、lign-contentalign-itemso本节的学习目标：(1)熟练掌握flex-direction属性的用法；(2)熟练掌握flex-wrap属性的用法；(3)熟练掌握justify-content属性的用法；(4)熟练掌握align-items属性的用法；(5)熟练掌握align-content属性的用法；(6)掌握使用容器属性设置小程序中容器的位置、对齐方式等。以下介绍各容器属性的程序编写。二、导入新知1. flex-direction 属性flex-direction属性主要用于设置主轴方向，通过设置坐标轴方向设置项目的排列方向,其语法格式如下:.containerflex-di
4、rection:row (默认值)row-reverse I column I column-reverseflex-direction属性的值如下。row：默认值，主轴在水平方向上，并且设置从左往右为正方向，项目在主轴方向上按照从左往右的顺序排列。row-reverse：主轴在水平方向上，并且设置从右往左为正方向，项目在主轴方向上按照从右往左的顺序排列。column：主轴在垂直方向上，并且设置从上往下为正方向，项目在主轴方向上按照从上往下的顺序排列。column-reverse：主轴在垂直方向上，并且设置从下往上为正方向，项目在主轴方向上按照从下往上的顺序排列。主轴主轴项目A项目B顼目C顼目
5、c项目B顼目Aflex-direction rowflex-direction:row-reverse交叉轴(a) row (默认值)交叉轴项目A项目Cflex-direction:colu*n(c) column2. flex-wmp 属性交叉熟(b) row-reverse交叉轴flex-direction:column-reverse顼目C项目B顷目A(d) column-reverseflex-wrap属性主要用于规定是否允许项目换行，以及在多行排列时的换行方向，其语法格式如下:.container flex-wrap:nowrap (默认值)1 wrap I wrap-reverse
6、)flex-wrap属性的值如下。nowrap：默认值，表示不换行。如果单行内容过多，那么项目宽度可能会被压缩。wrap：当容器单行容不下所有项目时允许换行排列。wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap方向 的反方向。主轴主轴咦目A喷目B喷目Cflex-wrap:rrap-reverse交叉轴交叉轴喷目Dflex-wrap wrap项目Dflex-wrap novrap(a) npwrap (默认值)(b) wrap(c) wrap-reversejustify-content 属性justify-content属性主要用于设置项目在主轴方向上的对齐
7、方式，以及分配项目之间及 其周围多余的空间，其语法格式如下：.containerjustify-content:flex-start (默认值)| flex-end | center | space-between | space-around | space- evenly)justify-content属性的值如下。flex-start：默认值，表示项目与主轴起点对齐，并且项目间不留空隙。center：项目在主轴方向上居中排列，并且项目间不留空隙，第一个项目离主轴起点 的距离等于最后一个项目离主轴终点的距离。flex-end：项目对齐主轴终点，并且项目间不留空隙。space-between
8、：项目间距相等，第一个项目离主轴起点的距离和最后一个项目离主 轴终点的距离为0。space-around：与space-between对齐方式相似，不同之处在于，第一个项目离主轴 起点的距离和最后一个项目离主轴终点的距离为中间项目间距的一半。space-evenly：项目间距、第一个项目离主轴起点的距离及最后一个项目离主轴终点的距离均相等。顷目c顼目A 顼目B |顼目Cjustify-content:flex-startjustify-content:flex-start交叉幼justify-content：flex-nd(a) flex-start (默认值)项目A 项目B 顼目C交叉熟交叉
9、轴justify-content.center(b) flex-end(d) space-between交叉轴(c) center(f) space-evenly交叉轴(e) space-around3. align-items 属性align-items属性主要用于设置项目在行中的对齐方式，其语法格式如下：.containeralign-items:stretch （默认值）I flex-start I center 1 flex-end|baseline）align-items属性的值如下。stretch：默认值，在未设置项目尺寸时，将项目拉伸至填满交叉轴。flex-start：项目顶部与
10、交叉轴起点对齐。center：项目在交叉轴上居中对齐。flex-end：项目底部与交叉轴终点对齐。baseline：项目与行的基线对齐，在未单独设置基线时，等同于flex-start对齐方式。交叉轴4（a） stretch （默认值）交叉熟喷目A啖目B项目C交叉轴交叉轴(b) flex-start(d) flex-endalign-items:center(c) centeralign-content 属性align-content属性主要用于在进行多行排列时，设置项目在交叉轴方向上的对齐方式， 以及分配项目之间及其周围多余的空间，其语法格式如下：.containeralign-content
11、:stretch （默认值）| flex-start | center | flex-end | space-between | space-around| space-evenly）align-content属性的值如下。stretch：默认值，在未设置项目尺寸时，将各行中的项目拉伸至填满交叉釉；在设置 了项目尺寸后，项目尺寸不变，将项目行拉伸至填满交叉轴。flex-start：首行在交叉轴起点开始排列，行间不留间距。center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点的距离和尾行离交 又轴终点的距离相等。flex-end：尾行在交叉轴终点开始排列，行间不留间距。space-be
12、tween：行间距相等，首行离交叉轴起点的距离和尾行离交叉轴终点的距离 为0。space-around：行间距相等，首行离交叉抽起点的距离和尾行离交叉轴终点的距离为 行间距的一半。space-evenly：行间距、首行离交叉轴起点的距离和尾行离交叉轴终点的距离相等。注意：在进行多行排列时,要杼flex-wrap属性值设置为wrap,表示允许换行。(a) stretchI：W1(b) flex-start主粕项FIANUIC耳IHB“iHDalign-content:flex-end项IIAIE MB 很交X触nl iicncontrnt :crntrr4IIC 琢 HD项HE(d) flex-
13、end项lie3D(c) center主轴项目B交叉轴欢HE(e) space-betweenalign content:space-betweenalign-content:space around 项HE(f) space-around主轴JIIA 项IIB项目C *IID-I align-content:space-evenly 项目E(g) space-evenly三、实现效果以align-content属性为例，根据任务描述，可以做出如图所示的效果。10:05umalign content 容器属性 align-contentflex-startIS用I吊lene四、任务实现以ali
14、gn-content属性为例，介绍上述实现效果的任务实现。(1 )编写alignContent.wxml文件中的代码。alignContent.wxml文件中包含5个蓝色的矩 形块，将水平方向的轴作为主轴，通过设置align-content属性的值，设置5个蓝色的矩形块 在行中的对齐方式。alignContent.wxml文件中的代码如下：容器属性 align-contentflex-staiK vieview class=mvContianernABCDE(2)编写alignContent.wxss文件中的代码。在该文件中定义.title (标题)样 式、.myContainer (容器属性
15、)样式和demo (矩形块)样式。alignContent.wxss代码如下：/* alignContent.wxss */ .myContianerborder: Ipx solid silver;width: 700rpx: height: 400rpx;margin: Orpx auto;display: flex;flex-urap: wrap;align-content: flex-start; * 自行更换成 stretch (默认值)flex-start center | flex-end space-between |space-around | space-e enly 试试* ).title 1 font-size: 25p text-align: center; margin: 15px;cdor: darkred: ) (font-size: 20px: text-align: center: margin: 15px;练习.demoheight: 30px:text-align: center;bwder: Ipx solid: background-color: lightblue:.A width: llOpx; B width: lOOpx; .C width: 150px; D width: lOOpx; .E width: llOpx: