上周五晚（3月31日），《9小时完成小程序开发》课程第二期直播课举行。 9点正式开始，直播持续了两个小时，直到11点才结束。

算上这次直播，不知不觉我已经直播了三遍了。我越来越熟练，直播状态也越来越好。可以说，直播时，一键搞定，非常轻松、轻松。在这种状态下，直播效果也是非常不错的。主要原因是学生的听力效率和吸收水平也更高，这是最重要的。

本课是关于如何将UI页面写成一个漂亮的小程序页面。主要讲了wxss、flex布局、组件等内容。但有两个要点。一是小程序新扩展的css尺寸单位rpx，二是flex布局。

rpx是响应式大小单位，和css中的px有些不同。它将适应不同移动设备的分辨率。这个兼容性解决方案非常棒。下面，逻辑分辨率为375*667，即1rpx = 0.5px = 1个物理像素。这里的物理像素是CSS中的px，0.5px实际上指的是逻辑分辨率的宽度。请记住，我们是针对标准进行设计和开发的，即750*1334的尺寸。此时1rpx=1个物理像素，小程序中体现的大小单位为一半。

这样设计的小程序页面无论在什么移动设备上都会自适应。

小程序的页面布局采用flex布局。传统的CSS布局采用：属性+属性+属性，但是这种布局有缺点。对于一些特殊的页面布局，例如垂直居中，它并不好。但是使用flex布局，一行代码就可以解决。 Flex布局是一种方便、简单、高效的布局解决方案。

Flex 有五个重要的容器属性和五个重要的元素属性。

五个重要的容器属性：

1.flex-决定主轴的方向

2、flex-wrap子元素是否换行

3. Flex-flow是前两者的缩写

4. - 主轴对准

5. - 交叉轴的对齐

五个重要的元素属性：

1. 项目顺序

2. 当有多余空间时，flex-grow项目的放大比例

3. flex- 项目的缩小比例，当空间不足时

4、Flex是前两种类型的缩写。

5. -self 允许单个项目与其他项目不同地对齐

可以说，只要掌握了flex布局，走遍天下都不怕，任何布局复杂的小程序页面都能应付自如。因此，也说明了flex布局非常重要，必须掌握。

直播概要：

1. wxss

2. 弹性布局

3. 组件

4.WeUI类库的使用方法

5. 课程回顾

6.综合示例：小程序课程学习助手首页

7.作业：小程序课程学习助手首页+课程详情页