任务11.4 弹性盒子

网页设计项目教程（HTML5+CSS3+JavaScript）模块11CSS布局任务11.4弹性盒子学习目标从认识弹性盒子的基本概念，到掌握常用容器属性与项目属性知识目标了解弹性盒子的基本概念；掌握弹性盒子的常用容器属性；掌握Flex项目的flex-grow属性。能力目标能够使用弹性盒子实现水平、垂直布局；能够控制项目的对齐与分布；能够使用flex-grow分配剩余空间。素养目标培养细致认真的职业素养；培养精益求精的工匠精神；养成灵活、规范布局的习惯。任务描述弹性盒子（Flexbox）能够简便、灵活地满足各种复杂的布局需求float浮动和position定位是可靠且跨浏览器的CSS布局技术，能够满足绝大部分情况下的布局需求，但在处理复杂布局以及一些响应式布局时存在局限性，提升了开发难度。比如在未设置每一列高度的情况下，实现多列布局中的所有列采用相同的高度；或者盒子内的子项数量不确定，却要求每个子项占用等量的宽度——依靠float和position是难以方便、灵活地实现的。而弹性盒子（Flexboxlayout）这一项简单而又强大的技术，包括水平布局、垂直布局、等高列布局、对齐控制等。本任务目标：掌握弹性盒子的基本概念与常用属性，能够使用弹性盒子实现水平布局、垂直布局、对齐控制与剩余空间分配。11.4.1基本概念：Flex容器与Flex项目当元素的display取值为flex，该元素成为Flex容器，其子元素成为Flex项目<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><style>.container{display:flex;/*开启弹性盒子布局*/width:500px;background-color:rgba(255,192,0);}.box{background-color:rgba(91,155,213);padding:5px;margin:5px;color:#fff;font-size:16px;}</style></head><body><divclass="container"><divclass="box">1</div><divclass="box">2</div><divclass="box">3</div><!--……省略4~9--><divclass="box">10</div></div></body></html>.containerdisplay:flex12345678910容器设置为弹性盒子后，10个子元素（Flex项目）在同一行内并排显示。图11-24设置弹性盒子两个概念Flex容器（flexcontainer）：display取值为flex的元素；Flex项目（flexitem）：容器下的所有子元素。容器负责布局，项目负责被排列。Flex模型：主轴与交叉轴Flex容器根据Flex模型对Flex项目进行布局，默认存在主轴与交叉轴两根轴主轴mainaxis交叉轴crossaxisitem1item2item3mainstartmainendcrossendmainsizecrosssize图11-25Flex模型Flex模型要点容器默认存在两根轴：水平的主轴（mainaxis）和与之垂直的交叉轴（crossaxis）；主轴的开始位置称为mainstart，结束位置称为mainend；交叉轴的开始位置称为crossstart，结束位置称为crossend；Flex项目沿主轴排列，交叉轴控制项目在垂直方向的对齐；主轴方向并不固定，通过flex-direction可修改主轴方向，交叉轴始终保持与主轴垂直。11.4.2常用容器属性以下属性作用于Flex容器，用于控制项目的排列方向、换行方式与对齐方式flex-direction指定主轴方向，即项目的排列方向；如row、column等。flex-wrap设置单行或多行显示；容器空间不足时，允许项目换行。justify-content控制项目在主轴上的对齐方式；如center、space-between。align-items控制项目在交叉轴上的对齐方式；如center、baseline。align-content控制多行项目在交叉轴上的对齐方式，多行时才生效。提示：容器属性设置在Flex容器（父元素）上，项目属性设置在每个Flex项目（子元素）上，二者不要混用。flex-direction：主轴方向作用于Flex容器，指定主轴方向，从而确定Flex项目的排列方向row默认值，主轴为水平方向，起点在容器左端12345起点→row-reverse主轴为水平方向，起点在容器右端12345←起点column主轴为垂直方向，起点在容器上沿起点在上，向下排列column-reverse主轴为垂直方向，起点在容器下沿起点在下，向上排列图11-26不同的主轴方向（容器中项目的排列方向与主轴方向保持一致）flex-wrap：换行容器在主轴方向无法存放多个项目时，通过flex-wrap允许项目换行并控制堆叠方向nowrap默认值，项目不换行，超出容器尺寸会溢出12345678wrap容器空间不足时，项目将排列到下一行123456789wrap-reverse项目换行，且行的顺序反转（从下往上）789123456图11-27flex-wrap换行效果justify-content：主轴对齐作用于Flex容器，控制Flex项目在主轴上的对齐方式flex-start默认值，项目在主轴开始位置对齐123flex-end项目在主轴结束位置对齐123center项目在主轴中间位置对齐123space-between首尾贴边，各项之间间距相等123space-around各项两侧间距相等，项间间距加倍123图11-28justify-content对齐效果align-items：交叉轴对齐作用于Flex容器，控制Flex项目在交叉轴上的对齐方式stretch默认值，项目被拉伸以适应容器高度123flex-start项目在交叉轴起始位置对齐123flex-end项目在交叉轴末尾位置对齐123center项目在交叉轴中间位置对齐123baseline项目按照其文本基线对齐123图11-29align-items对齐效果align-content：多行对齐作用于Flex容器，控制多行项目在交叉轴上的对齐方式，仅多行时生效stretch默认值，多行项目被拉伸以适应容器高度flex-start多行项目在交叉轴起始位置对齐flex-end多行项目在交叉轴末尾位置对齐center多行项目在交叉轴中间位置对齐space-between首行、末行贴容器两端，中间行平均分布space-around各行两侧间距相等，行间为边缘的两倍图11-30align-content对齐效果11.4.3项目属性：flex-grow作用于Flex项目，指定项目的放大比例，默认值为0（不放大）/*情形一：所有项目flex-grow均为1*/.box{flex-grow:1;}

/*情形二：只有数字6的项目为1*/.item6{flex-grow:1;}

/*情形三：数字6为2，其余为1*/.item6{flex-grow:2;}.box{flex-grow:1;}

/*说明：flex-grow决定项目在剩余空间中可分配到的比例；取值越大，该项目占据的剩余空间越多。*/全部项目flex-grow:1123456图11-31所有项目平分剩余空间仅第6项flex-grow:1123456图11-32只有一个项目占据所有剩余空间第6项flex-grow:2，其余为1123456图11-33一个项目占据其他项目两倍的剩余空间任务实施：使用弹性盒子完成页面布局打开配套的task-flex.html文件，编写CSS代码实现图11-34的页面效果01打开文件打开配套的task-flex.html文件02开启弹性为容器设置display:flex03确定方向设置主轴方向与是否换行04控制对齐使用对齐属性调整项目分布05分配空间使用flex-grow调整项目宽度注意：请勿使用float、position等其他定位技术完成本任务的页面效果；align-content仅在容器内存在多行项目时才生效。任务小结本任务完成了从"开启弹性盒子"到"控制对齐与分配空间"的学习会