网页设计与制作 课件 25 侧边栏固定布局.pptxVIP

侧边栏固定布局湖南安全技术职业学院网页设计与制作教学团队模块9使用Flex布局网页

入门测作业分析知识回顾设置容器为弹性布局display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;复习巩固

使用Flex容器属性可以控制容器内项目的排列方向及空间分配，但有时候还需要对某个项目的排序顺序及大小进行控制，这需要用到Flex项目的相关属性。本任务学习Flex项目相关属性设置，实现侧边栏固定布局。

学习内容flex项目属性orderflex-growflex-shrinkflex-basisflexalgin-self

Flex项目有6个属性用来控制项目的排列顺序及大小缩放，如下表所示。Flex项目属性属性描述order定义项目的排列顺序，数值越小，排列越靠前，默认为0。flex-grow定义项目在主轴上的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则平分剩余空间（如果有的话）；如果一个项目的flex-grow属性为2，其他的都为1，则前者占据剩余空间是其他项目的2倍。flex-shrink定义了项目在主轴上的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis定义了在分配多余空间之前，项目占据的主轴空间