任务目标

使用flex弹性布局重新对课程页面布局。

任务要求

（1）课程播放页面由通用页头、视频播放器、课程资料表格、视频列表、通用页尾，共五部分构成，内容部分使用弹性盒子改造，实现水平居中。

（2）将视频列表使用弹性盒子改造为水平排列，并允许换行。

效果如下图：

任务实施

（1）将已完成的页面内容备份并修改。

（2）设定页面中除去头部、尾部的内容，均包含在section元素中，该元素进行弹性布局，设置为弹性容器。

（3）设定弹性容器的方向，主轴对齐、垂直轴对齐方式，实现项目从上到下排列并水平居中。

教学微课

教学课件

扩展实践

使用弹性盒子样式实现九宫格布局，参数自定义即可。

能量贴士

善不积，不足以成名;恶不积，不足以灭身。语出《周易》。