网页设计项目教程（HTML5+CSS3+JavaScript）（第2版）【PPT课件】任务11.4 弹性盒子.pptxVIP

网页设计项目教程（HTML5+CSS3+JavaScript）模块11CSS布局任务11.4弹性盒子

学习目标从认识弹性盒子的基本概念，到掌握常用容器属性与项目属性知识目标了解弹性盒子的基本概念；掌握弹性盒子的常用容器属性；掌握Flex项目的flex-grow属性。能力目标能够使用弹性盒子实现水平、垂直布局；能够控制项目的对齐与分布；能够使用flex-grow分配剩余空间。素养目标培养细致认真的职业素养；培养精益求精的工匠精神；养成灵活、规范布局的习惯。

任务描述弹性盒子（Flexbox）能够简便、灵活地满足各种复杂的布局需求float浮动和position定位是可靠且跨浏览器的CSS布局技术，能够满足绝大部分情况下的布局需求，但在处理复杂布局以及一些响应式布局时存在局限性，提升了开发难度。比如在未设置每一列高度的情况下，实现多列布局中的所有列采用相同的高度；或者盒子内的子项数量不确定，却要求每个子项占用等量的宽度——依靠float和position是难以方便、灵活地实现的。而弹性盒子（Flexboxlayout）这一项简单而又强大的技术，包括水平布局、垂直布局、等高列布局、对齐控制等。本任务目标：掌握弹性盒子的基本概念与常用属性，能够使用弹性盒子实现水平布局、垂直布局、对齐控制与剩余空间分配。

11.4.1基本概念：Flex容器与F