flex布局的基本概念.pdfVIP

忍一句，息一怒，饶一着，退一步。——《增广贤文》 课时内容 flex 布局的基本概念 课时 4 掌握 flex 布局的基本概念； 教学目标 掌握坐标轴的设置； 掌握 flex 属性的使用。 掌握 flex 模型； 教学重难点 掌握 flex 属性的使用。 1.教学思路：介绍 flex 模型的基本概念、flex 布局的坐标系以及 flex 属性等知识内 容；通过多媒体演示和实机操作讲解微信小程序中 flex 模型的基本概念、flex 布 教学设计 局的坐标系以及 flex 属性的使用；通过小程序实战巩固基础知识。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 一、任务描述 本任务主要介绍 flex 布局。小程序使用 flex 模型可以提高页面布局的效率。flex 布局是一种灵 活的布局模型，当页面需要适应不同屏幕尺寸及设备类型时，flex 布局可以确保元素在恰当的位置。 本节的学习目标： （1）掌握flex 布局的基本概念； （2 ）掌握坐标轴的设置； （3 ）掌握flex 属性的使用。 以下分别介绍flex 模型的基本概念、flex 布局的坐标系以及 flex 属性等知识内容。 二、导入新知 1. flex 模型的基本概念 flex 模型的基本概念是容器和轴，容器包括外层的父容器和内层的子容器（又称为项 目，flex item ），轴包括主轴和交叉轴。在将父容器设置为 flex 模型后，它的所有子元素会 自动成为子容器成员，即子容器。如图所示： 容器默认存在两条轴，水平的主轴（main axis ）和垂直的交叉轴（cross axis ）。主轴的 一寸光阴一寸金，寸金难买寸光阴。——《增广贤文》 人人好公，则天下太平；人人营私，则天下大乱。——刘鹗 开始位置（与边框的交叉点）称为main start ，结束位置称为main end ；交叉轴的开始位置 称为cross start，结束位置称为cross end 。 子容器（项目）默认沿主轴排列，单个项目占据的主轴空间称为main size，占据的交 叉轴空间称为cross size 。 在flex 布局中，用于包含内容的组件称为容器（container ），容器内部的组件称为项目 （flex item ）。容器允许嵌套。实力代码如下： 2. 坐标轴 flex 布局的坐标系以容器左上角的点为原点，自原点往右、往下形成两条坐标轴。在默 认情况下是水平布局，即水平方向从左往右为主轴（main axis ），垂直方向从上往下为交叉 轴（cross axis ），如图（a ）所示。用户也可以使用样式属性 flex-direction:column 将主轴与 交叉轴的位置互换，如图（b ）所示 3. flex 属性 在小程序中，根据标签类型，可以将flex 布局的相关属性分为容器属性和项目属性。 flex 布局主要涉及 12 个属性（不含display:flex ），其中容器属性和项目属性各6 个， 但是常用的只有4 个，容器属性和项目属性各2 个。 flex 布局中的容器属性如表所示。 属 性 说 明 默 认 值 flex-direction 设置项目的排列方向 row flex-wrap 设