A-CSS 弹性布局讲解.pptx

HTML5网页设计主讲：陈玲模块八页面布局与规划

2.3弹性布局弹性布局简介弹性布局原理使用弹性布局来设计商品信息列表页面2025

2.3.1弹性布局简介弹性布局（也称为“伸缩盒子”或“弹性盒布局”）在CSS3中得到了进一步增强，为display属性添加了新值flex，并定义了一些新的属性。属性名说明display值为flex时，创建弹性布局容器flex-direction伸缩流方向flex-wrap伸缩流换行flex-flow伸缩流(包括方向与换行)justify-content主轴对齐align-items侧轴对齐属性名说明align-content堆栈伸缩行flex弹性模型对象的子元素如何分配空间order弹性模型对象的子元素出现的順序flex-grow扩展比率flex-shrink收缩比率flex-basis项目的长度

2.3.2弹性布局原理弹性布局一般由弹性布局的容器和弹性布局的伸缩项目两个部分组成。在使用时，首先定义主轴的方向，则交叉轴的方向也相应确定下来。在容器进行布局时，在每一行中伸缩项目从主轴起始位置开始，依次排列到主轴结束位置；而当容器中存在多行时，会把每一行从交叉轴起始位置开始，依次排列到交叉轴结束位置。

2.3.2弹性布局原理h5flex:11auto;/h5divclass=flex-container1divclass=flex-item1box/divdivclass=flex-item2box/divdivclass=flex-item3boxflex-center1/div/div.flex-container1{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;} .flex-item1{background-color:#0000FF;order:3;}.flex-item2{background-color:#00FF00;order:1;}

.flex-item3{background-color:#FF0000;order:2;}.flex-center1{flex:11auto;}

2.3.2弹性布局原理h5flex-basis:0%;flex-shrink:1;flex-grow:1;/h5divclass=flex-container1divclass=flex-item1boxflex-center2/divdivclass=flex-item2boxflex-center2/divdivclass=flex-item3boxflex-center2/div/div.flex-container1{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;} .flex-item1{background-color:#0000FF;order:3;}.flex-item2{background-color:#00FF00;order:1;}

.flex-item3{background-color:#FF0000;order:2;}.flex-center2{flex-basis:0%;flex-shrink:1;flex-grow:1;}

2.3.2弹性布局原理h5justify-content:flex-start;/h5divclass=flex-container1divclass=flex-item1box/divdivclass=flex-item2box/divdivclass=flex-item3box/div/div.flex-container1{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;} .flex-item1{background-color:#0000FF;order:3;}.flex-item2{background-color:#00FF00;order:1;}

.flex-item3{background-color:#FF0000;order:2;}

2.3.2弹性布局原理h5justify-content:space-around;/h5divclass=flex-conta