Web前端开发（HTML5+CSS3+JavaScript） 课件 第7章 弹性布局.pptx

Web前端基础技术;;弹性(Flex)布局：一种新的实现行、列布局的方式，也是当前WEB主流的布局方式。;;概念：默认情况下（不设置容器其他属性），任何一个容器包含两根轴

（3）主轴：水平方向的横轴，项从左到右排列；

（4）交叉轴：垂直方向的纵轴；

（5）主轴起点：左侧；终点：右侧。

（6）交叉轴起点：顶端；终点：底端。;二容器属性：指示容器中的项如何排列，如何对齐，是否分行;2.flex-wrap：项是否换行。;示例：一个弹性容器div，宽度400px，可换行，包含一组链接（padding:10px20px）

;3.justify-content：项在每根主轴上的对齐方式，通过设置宽度来观察效果。;示例：一个弹性容器div，宽度400px，可折行，包含一组链接（padding:10px20px）

主轴对齐方式：（1）起点对齐（左对齐，默认）；（2）终点对齐（右对齐）；（3）主轴居中对齐；（4）两端对齐；（5）环绕对齐

;4.align-content：项整体在交叉轴上的对齐方式---测试时，需要设置一定的高度，项必须可折行（多行）;示例：一个弹性容器div，宽度400px，可折行，包含一组链接（padding:10px20px）

主轴对齐方式：（1）起点对齐（左对齐，默认）；（2）终点对齐（右对齐）；（3）主轴居中对齐；（4）两端对齐；（5）环绕对齐；

交叉轴对齐方式：（1）拉伸（默认）；（2）（1）起点对齐（顶部对齐，默认）；（2）终点对齐（底部对齐）；（3）居中对齐；（4）两端对齐；（5）环绕对齐；

;5.align-items：项在交叉轴上的对齐方式;align-items与align-content的区别：

（1）align-items没有环绕和两端对齐；

（2）align-items优先级比align-content低，两者选择其一；

（3）align-items设置容器高度后，不折行也有效；align-content用于多行，配合flex-warp:wrap使用。

!!!(4)顶部/底部/居中对齐时（flex-start/flex-end/center），align-items在每一行均分间隔，而align-content的项之间无间隔。;示例：页面居中的块---登录界面页面居中实现

;divclass=containerfixed

divclass=item

这是块元素在块元素中居中的示例br/

模拟居中的登录窗体

p弹性容器仍然可以使用位置和定位属性/p

/div

/div;style

.container{

border:10pxsolidred;

/*弹性容器*/

display:flex;

justify-content:center;/*水平（主轴）居中*/

/*垂直居中；如果使用align-content:center，那么需要使用flex-wrap:wrap；*/

align-items:center;

/*加上固定定位：100%窗口大小*/

position:fixed;

left:0;right:0;top:0;bottom:0;

}

/*项-登录界面区域,使用align-items后，容器高度默认由元素决定，不会拉伸，根据需要来设置高度*/

.item{

width:400px;

height:200px;

border:10pxsolidblue;

}

/style;三项目属性;

style

.container{

border:10pxsolidred;

width:400px;

display:flex;

flex-direction:column;

}

.item{

border:1pxsolid#ccc;

height:40px;

margin:10px;

}

;2.flex-grow：该项跟随容器在主轴上的大小而放大的占比，默认为0，不跟随。;示例：弹性布局---商品列表;!DOCTYPEhtml

htmllang=