Web前端開發(fā)(HTML5+CSS3+JavaScript) 課件 第7章 彈性布局_第1頁
Web前端開發(fā)(HTML5+CSS3+JavaScript) 課件 第7章 彈性布局_第2頁
Web前端開發(fā)(HTML5+CSS3+JavaScript) 課件 第7章 彈性布局_第3頁
Web前端開發(fā)(HTML5+CSS3+JavaScript) 課件 第7章 彈性布局_第4頁
Web前端開發(fā)(HTML5+CSS3+JavaScript) 課件 第7章 彈性布局_第5頁
已閱讀5頁,還剩18頁未讀 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

Web前端基礎技術CSSJSHTML第7章

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

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

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

彈性布局概述

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

;(5)主軸起點:左側;終點:右側。(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:項是否換行?!虛Q行flex-warp:wrap;通常,設置容器的寬度,而容器高度默認由項高度決定,項目之間間隔默認為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>設置容器寬度,以顯示折行效果以下說明和示例,假定:flex-direction:row;flex-wrap:wrap;自動生成為行內塊元素3.justify-content:項在每根主軸上的對齊方式,通過設置寬度來觀察效果。(1).flex-start:默認值,項目依次對齊主軸起點,各項緊湊排列,即項之間間隔為0(左對齊)。(2).flex-end:項目對齊主軸終點,各項緊湊排列,即項之間間隔為0(右對齊)。(3).center:在主軸方向,項目居中對齊,項間隔為0,左右外邊距均分剩余空間。(4).space-around:項左右外邊距均分剩余空間。(5).space-between:項目在主軸方向上兩端對齊。注意:(4)、(5)自動計算項的外邊距(4)中,將剩余寬度空間平均分為每個元素的左右外邊距。(5)中,將剩余寬度空間平均分為除兩側元素之外的每個元素的左右外邊距。暫時記住取值對應的效果即可以下說明和示例,假定: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:項整體在交叉軸上的對齊方式---測試時,需要設置一定的高度,項必須可折行(多行)以下說明和示例,假定:flex-direction:row;flex-wrap:wrap;設置容器高度,以顯示垂直對齊示例:一個彈性容器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;

/*設置容器高度*/height:100px;

align-content:stretch;/*項高度不設置時*/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設置容器高度后,不折行也有效;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

后,容器高度默認由元素決定,不會拉伸,根據需要來設置高度*/.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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論