flex布局的基本概念

1、课时内容flex布局的基本概念课时4教学目标掌握flex布局的基本概念；掌握坐标轴的设置；掌握flex属性的使用。教学重难点掌握flex模型；掌握flex属性的使用。教学设计1.教学思路：介绍flex模型的基本概念、flex布局的坐标系以及flex属性等知识内容；通过多媒体演示和实机操作讲解微信小程序中flex模型的基本概念、flex布局的坐标系以及flex属性的使用；通过小程序实战巩固基础知识。2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍flex布局。小程序使用flex模型可以提高页面布局的效率。flex布局是一种灵活的布局模型，当页面需要适应

2、不同屏幕尺寸及设备类型时，flex布局可以确保元素在恰当的位置。本节的学习目标：（1）掌握flex布局的基本概念；（2）掌握坐标轴的设置；（3）掌握flex属性的使用。以下分别介绍flex模型的基本概念、flex布局的坐标系以及flex属性等知识内容。二、导入新知1. flex模型的基本概念flex模型的基本概念是容器和轴，容器包括外层的父容器和内层的子容器（又称为项目，flex item），轴包括主轴和交叉轴。在将父容器设置为flex模型后，它的所有子元素会自动成为子容器成员，即子容器。如图所示：容器默认存在两条轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴

3、的开始位置（与边框的交叉点）称为main start，结束位置称为main end；交叉轴的开始位置称为cross start，结束位置称为cross end。子容器（项目）默认沿主轴排列，单个项目占据的主轴空间称为main size，占据的交叉轴空间称为cross size。在flex布局中，用于包含内容的组件称为容器（container），容器内部的组件称为项目（flex item）。容器允许嵌套。实力代码如下：2. 坐标轴flex布局的坐标系以容器左上角的点为原点，自原点往右、往下形成两条坐标轴。在默认情况下是水平布局，即水平方向从左往右为主轴（main axis），垂直方向从上往下为交

4、叉轴（cross axis），如图（a）所示。用户也可以使用样式属性 flex-direction:column 将主轴与交叉轴的位置互换，如图（b）所示3. flex属性在小程序中，根据标签类型，可以将flex布局的相关属性分为容器属性和项目属性。flex布局主要涉及12个属性（不含display:flex），其中容器属性和项目属性各6个，但是常用的只有4个，容器属性和项目属性各2个。flex布局中的容器属性如表所示。属 性说 明默 认 值flex-direction设置项目的排列方向rowflex-wrap设置项目是否换行nowrapflex-flowflex-direction和flex

5、-wrap的综合简写方式row nowrapjustify-content设置项目在主轴方向上的对齐方式，以及分配项目之间及其周围多余的空间flex-startalign-items设置项目在行中的对齐方式stretchalign-content当多行排列时，设置行在交叉轴方向上的对齐方式，以及分配项目之间及其周围多余的空间stretchflex布局中的项目属性主要用于设置容器内部项目的尺寸、位置及对齐方式，如表所示。属 性说 明默 认 值order设置项目在主轴方向上的排列顺序0flex-shrink收缩在主轴方向上溢出的项目1flex-grow扩张在主轴方向上还有空间的项目0flex-basis 代替项目的宽度或高度属性autoflexflex-shrink、flex-grow和flex-basis的综合简写方式