版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目07使用弹性盒布局二级导航菜单任务7-1使用弹性盒完成可扩展二级导航
知识点掌握弹性盒布局的概念掌握弹性容器的常用属性设置技能点学会使用弹性盒子进行页面布局并进行样式设置能够根据需要选择合适的页面布局方式一、CSS3弹性盒子CSS弹性盒子布局是CSS3的模块之一，定义了一种针对用户界面设计而优化的CSS盒子模型。在弹性布局模型中，弹性容器的子元素可以在行/列上排列，为了保证既能填满未使用的空间，又避免父元素溢出，我们在开发中就必须要把它们设置成“可伸缩”的弹性盒子，能够根据子菜单的项数改变它们的分布情况。网上商城左侧导航二级子菜单的个数不固定，就可以将子菜单设置成“可伸缩”的弹性盒子，从而动态改变子菜单的宽度大小。二、CSS3弹性盒子内容弹性盒子由弹性容器（Flexcontainer）和弹性子元素（Flexitem）组成。设置父级盒子的display属性的值为flex或inline-flex可将其定义为弹性容器，弹性容器内包含一个或多个弹性子元素。弹性子元素默认在弹性盒子内显示为一行，无论子元素的宽度多少，都在一行内显示，默认从左到右排列。<style>
.flex-container{
display:flex;
width:450px;
height:300px;
border:1pxsolid;
}.flex-item{
width:200px;
height:125px;
margin:10px;
border:1pxsolid;
}</style><body>
<divclass="flex-container">
<divclass="flex-item">盒子1</div>
<divclass="flex-item">盒子2</div>
<divclass="flex-item">盒子3</div></div> </body>固定的宽度和高度，在弹性盒子中，子元素可收缩尺寸以避免父元素溢出。三、CSS3弹性盒子常用属性CSS弹性盒子布局的CSS分两种。一种是应用于父容器的的CSS样式，用于设定父容器本身或者全部子元素的表现形式；另一种则是应用在子元素上，用于设置单个子元素的表现行为。样式属性描述flex-direction指定弹性容器中子元素排列方式flex-wrap设置弹性盒子的子元素超出父容器时是否换行flex-flowflex-direction和flex-wrap的简写align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式align-content修改flex-wrap属性的行为，类似align-items,但不是设置子元素对齐，而是设置行对齐justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式弹性盒子父容器样式属性属性描述order设置弹性盒子的子元素排列顺序。flex-grow设置或检索弹性盒子元素的扩展比率。flex-shrink指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。flex-basis用于设置或检索弹性盒伸缩基准值。flex设置弹性盒子的子元素如何分配空间。align-self在弹性子元素上使用。覆盖容器的align-items属性。弹性子元素样式属性三、CSS3弹性盒子常用属性—flex-direction属性flex-direction 属性用于指定弹性容器中子元素排列方式。可以取四个值：（1）row：默认值，设置伸缩盒对象的子元素在父容器中的水平分布并靠在父容器的左侧（2）row-reverse：与row相同，但是以相反的顺序。（3）column：设置伸缩盒对象的子元素在父容器中的垂直分布，由上向下排列。（4）column-reverse：与column相同，但是以相反的顺序。rowrow-reversecolumncolumn-reverse三、CSS3弹性盒子常用属性—flex-wrap属性flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行/列。可以取三个值：（1）nowrap(默认)：规定元素不拆行或不拆列。<body>
<divclass="flex-container">
<divclass="flex-item">盒子1</div>
<divclass="flex-item">盒子2</div>
<divclass="flex-item">盒子3</div>
<divclass="flex-item">盒子4</div>
<divclass="flex-item">盒子5</div>
</div></body>.flex-container{ display:flex; width:450px; height:300px; border:1pxsolid;
}.flex-item{
width:200px;
height:125px;
margin:10px;
border:1pxsolid;}三、CSS3弹性盒子常用属性—flex-wrap属性flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行/列。可以取三个值：（2）wrap：规定元素在必要的时候拆行或拆列，方向从上到下/从左到右。.flex-container{
display:flex;
width:450px;
height:300px;
border:1pxsolid;
flex-wrap：wrap;
}.flex-item{
width:200px;
height:125px;
margin:10px;
border:1pxsolid;}flex-direction:row;flex-direction:row;三、CSS3弹性盒子常用属性—flex-wrap属性flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行/列。可以取三个值：（2）wrap：规定元素在必要的时候拆行或拆列，方向从上到下/从左到右。.flex-container{
display:flex;
width:450px;
height:auto;
border:1pxsolid;
flex-wrap：wrap;
}.flex-item{
width:200px;
height:125px;
margin:10px;
border:1pxsolid;}在主轴为行的情况下，如果我们将弹性容器的高度设为默认值auto，则可以根据子元素内容来扩展弹性盒子的高度。三、CSS3弹性盒子常用属性—flex-wrap属性flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行/列。可以取三个值：（2）wrap：规定元素在必要的时候拆行或拆列，方向从上到下/从左到右。.flex-container{
display:flex;
flex-direction:column;
width:auto; height:300px;
border:1pxsolid;
flex-wrap：wrap;
}.flex-item{
width:200px;
height:125px;
margin:10px;
border:1pxsolid;}在主轴为列的情况下，固定弹性容器的高度，将其宽度设为默认值auto，则可以根据子元素内容来扩展弹性盒子的宽度。三、CSS3弹性盒子常用属性—flex-wrap属性flex-wrap属性设置弹性盒子的子元素超出父容器时是否换行/列。可以取三个值：（3）wrap-reverse：设置伸缩盒对象的子元素在父容器中的位置水平/垂直逆序分布并靠在父容器的右/下侧。效果与wrap正好相反。三、CSS3弹性盒子常用属性—flex-flow属性flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。例如：.flex-container{flex-flow:<flex-direction><flex-wrap>}三、CSS3弹性盒子常用属性—align-items属性align-items属性定义设置弹性盒子元素在垂直方向上的对齐方式。（适用于子元素排列为单行值描述stretch默认值。项目被拉伸以适应容器。center项目位于容器的中心。flex-start项目位于容器的开头。flex-end项目位于容器的结尾。baseline项目位于容器的基线上。flex-startflex-endcenterbaselinestretch（子元素高度为auto）三、CSS3弹性盒子常用属性—justify-content属性justify-content用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式。值描述flex-start默认值。项目位于容器的开头。flex-end项目位于容器的结尾。center项目位于容器的中心。space-between项目位于各行之间留有空白的容器内。space-around项目位于各行之前、之间、之后都留有空白的容器内。flex-startflex-endcenterspace-betweenspace-around四、弹性子元素属性不详细讲述属性描述order设置弹性盒子的子元素排列顺序。flex-grow设置
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 机电队安全工作计划
- 2024年协会财务工作计划
- 体育运动工作计划
- 国培之旅-参加“国培计划”培训班心得
- 《蛋鸡疾病防治思路》课件
- 初中骨干教师培训计划 骨干教师教学计划
- 《财经文书写作》课件
- 2024-2024学年语文组主题教学计划范文
- 2024年人事经理下半年工作计划范文
- “计生委计划生育科学发展观剖析”计划生育工作计划
- 30题仪表工程师岗位常见面试问题含HR问题考察点及参考回答
- 2024年江苏交通控股有限公司招聘笔试参考题库附带答案详解
- 宣布干部任命简短讲话3篇
- 《现代汉语》（增订6版）笔记和课后习题(含考研真题)详解
- “西学中”培训班《中医基础理论》试题及答案
- 高尔基《我的大学》
- 化工有限公司生产安全事故应急预案
- 2021年卫生院第二十二届宪法宣传周活动总结
- 律师事务所战略合作协议 范文 模板
- 内蒙古工业大学综合测评办法
- 成品油项目立项申请报告（范文模板）
评论
0/150
提交评论