任务目标

利用flex弹性布局页面重新布局首页。

任务要求

（1）使用弹性布局重新对首页进行布局。

（2）不影响原有效果。

效果如下图：

任务实施

（1）将首页的各部分单元代码进行整合，将首页整体看作是一个从上至下排列的弹性容器。从上至下一次是头部区域，轮播区域，学习线路，课程列表，更多推荐，尾部区别，进行弹性布局。

（2）去除各部分单元的原有的浮动相关样式并使用弹性布局替换。

教学微课

教学课件

经验分享

需要注意的是，当设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效。

能量贴士

自诚明，谓之性;自明诚，谓之教。诚则明矣，明则诚矣。语出《中庸》。