任务概述

计算机技术越来越完善，对人类生活的影响也越来越显著，在 5G 背景下,计算机互联网技术逐渐成为转变人们思想动态与生活理念的基本要素。作为网站底层基础的前端开发,也将迎来全新的发展浪潮,能够通过技术革新与应用的方式, 提升计算机互联网技术的实效性和有效性。所以，我们前端开发人员，要不断提升自己的知识和技能，为社会主义现代化的事业做出贡献，并完成自我的价值提升。

Flex弹性布局是 CSS3 的一种新的布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒布局的设计目是提供一种有效的方法，对一个容器中的子元素进行排列、对齐和分配空白空间。从而避免传统div+css布局方式中，需要依赖大量的盒模型内外边距来调整，而导致项目页面宽度灵活适应性差；混乱的边距使用方式，导致项目难以修改维护。

弹性盒子的优势体现在移动端，可以快速实现各种灵活的布局，提高开发效率，希望同学们以此为借鉴，提高学习和工作效率。

本单元将之前使用浮动方式布局的页面通过弹性盒子进行改造。

素质目标

培养学生的创新意识。

培养学生的职业素养。

培养学生与本专业发展相适应的劳动素养。

知识目标

了解弹性盒子的特点与优势

掌握弹性布局

技能目标

掌握使用弹性布局替换浮动布局

熟练使用弹性盒子布局