# 扩展阅读清单：第4次课

> 对应教材：《微信小程序开发实战（第2版）》第2章
> 课程主题：WXSS样式与Flex布局
> 重点：WXSS语法、rpx单位、Flex布局、样式导入　难点：Flex布局的轴方向与对齐方式

---

## 官方文档（必读）

| 序号 | 资源 | 类型 | 说明 |
|:---:|------|:----:|------|
| 1 | [WXSS 样式](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html) | 文档 | rpx 换算规则与样式导入 |
| 2 | [view 视图容器](https://developers.weixin.qq.com/miniprogram/dev/component/view.html) | 文档 | 最常用的布局容器 |
| 3 | [scroll-view 滚动视图](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html) | 文档 | 横向滚动分类导航要用到 |

## Flex 布局

| 序号 | 资源 | 类型 | 说明 |
|:---:|------|:----:|------|
| 4 | [MDN · CSS 弹性盒子布局](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout) | 文档 | 最权威的 Flex 参考，小程序的 Flex 与标准一致 |
| 5 | [MDN · Flex 布局基本概念](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) | 文档 | 主轴/交叉轴讲得最清楚的一篇 |
| 6 | [Flexbox Froggy（互动练习）](https://flexboxfroggy.com/#zh-cn) | 练习 | 24 关小游戏，一节课就能刷完，强烈推荐当课堂练习 |
| 7 | [CSS Tricks · Flexbox 完全指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) | 文档 | 带图速查表，贴在显示器边上很实用 |

## 视频资源（检索关键词）

| 序号 | 资源 | 类型 | 说明 |
|:---:|------|:----:|------|
| 8 | [B 站检索：「Flex 布局 十分钟」](https://search.bilibili.com/all?keyword=Flex%E5%B8%83%E5%B1%80) | 视频 | 找带可视化演示轴向变化的 |

---

## 本课自查清单

看完资料后，用下面几个问题自测。答不上来的，回到对应文档再看一遍。

- [ ] 你能独立完成吗：WXSS样式的基本语法与特点
- [ ] 你能讲清楚吗：rpx响应式单位与px的换算
- [ ] 你能独立完成吗：Flex布局的核心属性与用法
- [ ] 你能做到吗：使用Flex实现常见页面布局
- [ ] 遇到「rpx 在大屏上字体过大」时，你知道从哪里开始查吗？
- [ ] 遇到「justify-content 和 align-items 记反」时，你知道从哪里开始查吗？
- [ ] 遇到「给 flex 子项设了固定宽度还写 flex:1」时，你知道从哪里开始查吗？

---

> 说明：以上链接均为官方文档、MDN 或知名开源仓库，可长期访问。
> 视频类资源只给检索入口而不写死具体视频链接——UP 主调整内容后单条链接极易失效，按关键词自行挑选近一年内、基于当前稳定版工具的教程更可靠。