微信小程序开发-教案-4.2-教案-容器属性.docxVIP

第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属性的用法；

教学设计

.教学思路:介绍容器的6个属性:flex-direction、flex-wrap、flex-flow、justify-content、align-contentalign-itemso通过多媒体演示和实机操作讲解微信小程序容器中flexdirectionflex-wrapflex-flowjustify-content、align-contentalign-items等属性的使用；通过小程序实战巩固基础知识。

.教学手段：多媒体+计算机

.教学资料：教材、多媒体课件

教学内容

一、任务描述

本任务主要介绍容器的67bS：flex-directionflex-wrapflex-flowjustify-contentalign-content

align-itemso本节的学习目标：

(1)熟练掌握flex-direction属性的用法；

(2)熟练掌握flex-wrap属性的用法；

(3)熟练掌握justify-content属性的用法；

(4)熟练掌握align-items属性的用法；

(5)熟练掌握align-content属性的用法；

(6)掌握使用容器属性设置小程序中容器的位置、对齐方式等。

以下介绍各容器属性的程序编写。

二、导入新知1.flex-direction属性

flex-direction属性主要用于设置主轴方向，通过设置坐标轴方向设置项目的排列方向,

其语法格式如下:

.container{flex-direction:row(默认值)row-reverseIcolumnIcolumn-reverse

flex-direction属性的值如下。

row：默认值，主轴在水平方向上，并且设置从左往右为正方向，项目在主轴方向上按照从左往右的顺序排列。

row-reverse：主轴在水平方向上，并且设置从右往左为正方向，项目在主轴方向上按照从右往左的顺序排列。

column：主轴在垂直方向上，并且设置从上往下为正方向，项目在主轴方向上按照从上往下的顺序排列。

column-reverse：主轴在垂直方向上，并且设置从下往上为正方向，项目在主轴方向上按照从下往上的顺序排列。

主轴主轴

主轴

项目A项目B

顼目C顼目c

项目B顼目A

flex-directionrowflex-direction:row-reverse

flex-directionrow

交叉轴

(a)row(默认值)交叉轴

项目A项目C

flex-direction:colu*n(c)column

2.flex-wmp属性交叉熟

(b)row-reverse交叉轴

flex-direction:column-reverse顼目C

项目B顷目A

(d)column-reverseflex-wrap属性主要用于规定是否允许项目换行，以及在多行排列时的换行方向，其语

法格式如下:

.container{flex-wrap:nowrap(默认值)1wrapIwrap-reverse

)

flex-wrap属性的值如下。

nowrap：默认值，表示不换行。如果单行内容过多，那么项目宽度可能会被压缩。

wrap：当容器单行容不下所有项目时允许换行排列。

wrap-reverse：当容器单行容不下所有项目时允许换行排列，换行方向为wrap方向的反方向。

主轴主轴—

主轴

咦目A

咦目A喷目B喷目C

flex-wrap:rrap-reverse

交叉轴交叉轴喷目D

交叉轴

交叉轴

flex-wrapwrap

项目D

项目D

(a)npwrap(默认值)(b)wrap(c)wrap-reversejustify-content属性

justify-content属性主要用于设置项目在主轴方向上的对齐方式，以及分配项目之间及其周围多余的空间，其语法格式如下：

.container{

justify-content:flex-start(默认值)|flex-end|center|space-betwee