Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第7章 彈性布局

Web前端基礎(chǔ)技術(shù)CSSJSHTML第7章

彈性布局Contents目錄彈性布局概述容器屬性項屬性彈性(Flex)布局：一種新的實現(xiàn)行、列布局的方式，也是當前WEB主流的布局方式。

目的：使頁面整體和局部布局更簡單、靈活；可以取代浮動布局。

3個概念：（1）容器：任何元素設(shè)置display:flex后，都可以成為一個彈性容器，簡稱容器。（2）項：所有容器中的任意直接子元素，項具有行內(nèi)塊特征。默認情況下，所有容器中的項，都從左到右按行排列，類似浮動元素，但沒有浮動副作用，也不會自動換行。一個示例：認識彈性布局，實現(xiàn)元素水平排列一

彈性布局概述

概念：默認情況下（不設(shè)置容器其他屬性），任何一個容器包含兩根軸（3）主軸：水平方向的橫軸，項從左到右排列；（4）交叉軸：垂直方向的縱軸

；（5）主軸起點：左側(cè)；終點：右側(cè)。（6）交叉軸起點：頂端；終點：底端。默認特性：-水平排列：主軸默認為水平軸。所有項默認從左到右按行排列，項之間間隔為0，具有浮動效果（,但無浮動副作用。-容器高度自適應：容器高度由項高度決定；項的高度占滿容器高度100%；-項不自動分行：項總寬度超出容器寬度時，不會自動折行，而是盡量縮小項寬度，無法縮小時溢出容器。在上例中，通過：（1）增加容器高度（2）限制寬度來理解默認特性二

容器屬性：指示容器中的項如何排列，如何對齊，是否分行1.flex-direction/2.flex-wrap/3.justify-content/4.align-content/5.align-items1.flex-direction：項在容器排列方向。

√水平排列：從左到右排列（記憶）flex-direction：row；/*默認值*/項高度默認100%√垂直排列：從上到下排列【相當把行順時針90度】flex-direction：column；項寬度默認100%2.flex-wrap：項是否換行。√換行flex-warp：wrap;通常，設(shè)置容器的寬度，而容器高度默認由項高度決定，項目之間間隔默認為0.以下說明和示例，假定flex-direction：row，flex-wrap:wrap;即主軸為水平軸且換行示例：一個彈性容器div，寬度400px，可換行，包含一組鏈接（padding:10px20px）<divclass="container"><ahref="#"class="item">華為</a><ahref="#"class="item">中興</a><ahref="#"class="item">小米</a><ahref="#"class="item">聯(lián)想</a><ahref="#"class="item">諾基亞</a><ahref="#"class="item">蘋果</a><ahref="#"class="item">華碩</a></div><style>.container{

width:400px;border:10pxsolidred;/*作為彈性容器*/

display:flex;/*項可折行顯示*/

flex-wrap:wrap;}.item{padding:10px20px;/*撐大元素*/border:1pxdotted#333;}</style>設(shè)置容器寬度，以顯示折行效果以下說明和示例，假定：flex-direction：row；flex-wrap：wrap;自動生成為行內(nèi)塊元素3.justify-content：項在每根主軸上的對齊方式，通過設(shè)置寬度來觀察效果。(1).flex-start：默認值，項目依次對齊主軸起點，各項緊湊排列，即項之間間隔為0（左對齊）。(2).flex-end：項目對齊主軸終點，各項緊湊排列，即項之間間隔為0（右對齊）。(3).center：在主軸方向，項目居中對齊，項間隔為0，左右外邊距均分剩余空間。(4).space-around：項左右外邊距均分剩余空間。(5).space-between：項目在主軸方向上兩端對齊。注意：（4）、（5）自動計算項的外邊距（4）中，將剩余寬度空間平均分為每個元素的左右外邊距。（5）中，將剩余寬度空間平均分為除兩側(cè)元素之外的每個元素的左右外邊距。暫時記住取值對應的效果即可以下說明和示例，假定：flex-direction：row；flex-wrap：wrap;示例：一個彈性容器div，寬度400px，可折行，包含一組鏈接（padding:10px20px）主軸對齊方式：（1）起點對齊（左對齊，默認）；（2）終點對齊（右對齊）；（3）主軸居中對齊；（4）兩端對齊；（5）環(huán)繞對齊.container{

width:400px;border:10pxsolidred;/*作為彈性盒子*/display:flex;/*可折行顯示*/

flex-wrap:wrap;/*對齊方式，注意，必須寬度足夠*/

justify-content:flex-start;justify-content:flex-end;justify-content:center;justify-content:space-between;justify-content:space-around;}12345在每根（2根）水平軸對齊以下說明和示例，假定：flex-direction：row；flex-wrap：wrap;4.align-content：項整體在交叉軸上的對齊方式---測試時，需要設(shè)置一定的高度，項必須可折行（多行）以下說明和示例，假定：flex-direction：row；flex-wrap：wrap;設(shè)置容器高度，以顯示垂直對齊示例：一個彈性容器div，寬度400px，可折行，包含一組鏈接（padding:10px20px）主軸對齊方式：（1）起點對齊（左對齊，默認）；（2）終點對齊（右對齊）；（3）主軸居中對齊；（4）兩端對齊；（5）環(huán)繞對齊；交叉軸對齊方式：（1）拉伸（默認）；（2）（1）起點對齊（頂部對齊，默認）；（2）終點對齊（底部對齊）；（3）居中對齊；（4）兩端對齊；（5）環(huán)繞對齊；.container{width:400px;border:10pxsolidred;

/*作為彈性盒子*/display:flex;/*可折行顯示*/flex-wrap:wrap;

/*設(shè)置容器高度*/height:100px;

align-content:stretch;/*項高度不設(shè)置時*/align-content:flex-start;align-content:flex-end;align-content:center;align-content:space-between;align-content:space-around；}整體在垂直方向上對齊123456以下說明和示例，假定：flex-direction：row；flex-wrap：wrap;5.align-items：項在交叉軸上的對齊方式下外邊距均分上外邊距均分上、下外邊距均分無兩端對齊和環(huán)繞對齊富余的行間隔均分align-items與align-content的區(qū)別：（1）align-items沒有環(huán)繞和兩端對齊；（2）align-items優(yōu)先級比align-content低，兩者選擇其一；（3）align-items設(shè)置容器高度后，不折行也有效；align-content用于多行，配合flex-warp:wrap使用。!!!(4)頂部/底部/居中對齊時（flex-start/flex-end/center），align-items在每一行均分間隔，而align-content的項之間無間隔。理解區(qū)別的示例<divclass="container"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="item">4</div><divclass="item">5</div><divclass="item">6</div></div>.container{width:240px;height:400px;border:10pxsolidred;display:flex;justify-content:center;

/*修改此處觀察變化*/

flex-wrap:wrap;

/*align-content:center;*/align-items:center;}.item{height:100px;width:100px;border:1pxsolid#ccc;}以下說明和示例，假定：flex-direction：row；flex-wrap：wrap;示例：頁面居中的塊---登錄界面頁面居中實現(xiàn)<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;}

/*項-登錄界面區(qū)域,使用align-items

后，容器高度默認由元素決定，不會拉伸，根據(jù)需要來設(shè)置高度*/.item{width:400px;height:200px;border:10pxsolidblue;}</style>三

項目屬性

1.order

/2.flex-grow/3.flex-shrink/4.align-self1.order：項在主軸的排列順序。整數(shù)值，值越小，越靠前。默認為0，可取負值。示例：使用order屬性，使各項按照指定值自動從大到小排列。

<divclass="container"><divclass="itemw1">中國????</div><divclass="itemw2">美國????</div><divclass="itemw3">英國????</div></div><style>.container{border:10pxsolidred;width:400px;

display:flex;flex-direction:column;}.item{border:1pxsolid#ccc;height:40px;margin:10px;}

.w1{width:300px;

order:-300;}.w2{width:200px;

order:-200;}.w3{width:100px;

order:-100;}2.flex-grow：該項跟隨容器在主軸上的大小而放大的占比，默認為0，不跟隨。示例：彈性布局---三列布局<divclass="container"><divclass="itemleft">left</div><divclass="itemmiddle">middle</div><divclass="itemright">right</div></div>.container{

width:400px;/*改變?yōu)?00*/border:10pxsolidred;display:flex;}.item{width:100px;/*參考寬度*/

min-height:100px;background-color:#ccc;}.left{flex-grow:1;

/*1/4100+(400-300)*1/4=125px*/}.right{flex-grow:1;

/*1/4*/}.middle{flex-grow:2;

/*2/4*/

/*2/4100+(400-300)*2/4=150px*/background-color:yellow;}注意：通常左右固定寬度，而中間自適應示例：彈性布局---商品列表<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><divclass="container"><di