版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 苏州大货车租赁合同范本
- 私人家教合同协议书样本
- 甲方向乙方投资合同范本
- 燃气安装保证协议书范本
- 淘宝店铺出租合同协议书
- 签第三方协议咋写合同书
- 生活供水合同协议书范本
- 物业与业主购电合同范本
- 花圃改造合同协议书范本
- 汽车入股合同协议书模板
- 浙江省中学生艺术特长b级测试-美术西画基础知识复习提纲(完整版)资料
- GB/T 18033-2007无缝铜水管和铜气管
- GB/T 15056-2017铸造表面粗糙度评定方法
- 天然气泄漏应急演练方案及总结
- GA 254-2009警服衬衣
- FZ/T 74007-2019户外防晒皮肤衣
- 光合作用在农业生产上的应用课件
- 生物制药技术与工程课件
- 完整版医院体检报告范本
- (中职)会计基础教学ppt课件(完整版)
- T∕ASC 17-2021 电动汽车充换电设施系统设计标准
评论
0/150
提交评论