《Web前端開(kāi)發(fā)項(xiàng)目教程》彈性盒布局-使用彈性盒制作可擴(kuò)展二級(jí)導(dǎo)航_第1頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》彈性盒布局-使用彈性盒制作可擴(kuò)展二級(jí)導(dǎo)航_第2頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》彈性盒布局-使用彈性盒制作可擴(kuò)展二級(jí)導(dǎo)航_第3頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》彈性盒布局-使用彈性盒制作可擴(kuò)展二級(jí)導(dǎo)航_第4頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》彈性盒布局-使用彈性盒制作可擴(kuò)展二級(jí)導(dǎo)航_第5頁(yè)
已閱讀5頁(yè)，還剩11頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

項(xiàng)目07使用彈性盒布局二級(jí)導(dǎo)航菜單任務(wù)7-1使用彈性盒完成可擴(kuò)展二級(jí)導(dǎo)航

知識(shí)點(diǎn)掌握彈性盒布局的概念掌握彈性容器的常用屬性設(shè)置技能點(diǎn)學(xué)會(huì)使用彈性盒子進(jìn)行頁(yè)面布局并進(jìn)行樣式設(shè)置能夠根據(jù)需要選擇合適的頁(yè)面布局方式一、CSS3彈性盒子CSS彈性盒子布局是CSS3的模塊之一，定義了一種針對(duì)用戶界面設(shè)計(jì)而優(yōu)化的CSS盒子模型。在彈性布局模型中，彈性容器的子元素可以在行/列上排列，為了保證既能填滿未使用的空間，又避免父元素溢出，我們?cè)陂_(kāi)發(fā)中就必須要把它們?cè)O(shè)置成“可伸縮”的彈性盒子，能夠根據(jù)子菜單的項(xiàng)數(shù)改變它們的分布情況。網(wǎng)上商城左側(cè)導(dǎo)航二級(jí)子菜單的個(gè)數(shù)不固定，就可以將子菜單設(shè)置成“可伸縮”的彈性盒子，從而動(dòng)態(tài)改變子菜單的寬度大小。二、CSS3彈性盒子內(nèi)容彈性盒子由彈性容器（Flexcontainer）和彈性子元素（Flexitem）組成。設(shè)置父級(jí)盒子的display屬性的值為flex或inline-flex可將其定義為彈性容器，彈性容器內(nèi)包含一個(gè)或多個(gè)彈性子元素。彈性子元素默認(rèn)在彈性盒子內(nèi)顯示為一行，無(wú)論子元素的寬度多少，都在一行內(nèi)顯示，默認(rèn)從左到右排列。<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分兩種。一種是應(yīng)用于父容器的的CSS樣式，用于設(shè)定父容器本身或者全部子元素的表現(xiàn)形式；另一種則是應(yīng)用在子元素上，用于設(shè)置單個(gè)子元素的表現(xiàn)行為。樣式屬性描述flex-direction指定彈性容器中子元素排列方式flex-wrap設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行flex-flowflex-direction和flex-wrap的簡(jiǎn)寫align-items設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式align-content修改flex-wrap屬性的行為，類似align-items,但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊justify-content設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式彈性盒子父容器樣式屬性屬性描述order設(shè)置彈性盒子的子元素排列順序。flex-grow設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。flex-shrink指定了flex元素的收縮規(guī)則。flex元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù)flex-shrink的值。flex-basis用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。flex設(shè)置彈性盒子的子元素如何分配空間。align-self在彈性子元素上使用。覆蓋容器的align-items屬性。彈性子元素樣式屬性三、CSS3彈性盒子常用屬性—flex-direction屬性flex-direction 屬性用于指定彈性容器中子元素排列方式。可以取四個(gè)值：（1）row：默認(rèn)值，設(shè)置伸縮盒對(duì)象的子元素在父容器中的水平分布并靠在父容器的左側(cè)（2）row-reverse：與row相同，但是以相反的順序。（3）column：設(shè)置伸縮盒對(duì)象的子元素在父容器中的垂直分布，由上向下排列。（4）column-reverse：與column相同，但是以相反的順序。rowrow-reversecolumncolumn-reverse三、CSS3彈性盒子常用屬性—flex-wrap屬性flex-wrap屬性設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行/列。可以取三個(gè)值：（1）nowrap(默認(rèn))：規(guī)定元素不拆行或不拆列。<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屬性設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行/列。可以取三個(gè)值：（2）wrap：規(guī)定元素在必要的時(shí)候拆行或拆列，方向從上到下/從左到右。.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屬性設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行/列。可以取三個(gè)值：（2）wrap：規(guī)定元素在必要的時(shí)候拆行或拆列，方向從上到下/從左到右。.flex-container{

display:flex;

width:450px;

height:auto;

border:1pxsolid;

flex-wrap：wrap;

}.flex-item{

width:200px;

height:125px;

margin:10px;

border:1pxsolid;}在主軸為行的情況下，如果我們將彈性容器的高度設(shè)為默認(rèn)值auto，則可以根據(jù)子元素內(nèi)容來(lái)擴(kuò)展彈性盒子的高度。三、CSS3彈性盒子常用屬性—flex-wrap屬性flex-wrap屬性設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行/列。可以取三個(gè)值：（2）wrap：規(guī)定元素在必要的時(shí)候拆行或拆列，方向從上到下/從左到右。.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;}在主軸為列的情況下，固定彈性容器的高度，將其寬度設(shè)為默認(rèn)值auto，則可以根據(jù)子元素內(nèi)容來(lái)擴(kuò)展彈性盒子的寬度。三、CSS3彈性盒子常用屬性—flex-wrap屬性flex-wrap屬性設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行/列。可以取三個(gè)值：（3）wrap-reverse：設(shè)置伸縮盒對(duì)象的子元素在父容器中的位置水平/垂直逆序分布并靠在父容器的右/下側(cè)。效果與wrap正好相反。三、CSS3彈性盒子常用屬性—flex-flow屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為rownowrap。例如：.flex-container{flex-flow:<flex-direction><flex-wrap>}三、CSS3彈性盒子常用屬性—align-items屬性align-items屬性定義設(shè)置彈性盒子元素在垂直方向上的對(duì)齊方式。（適用于子元素排列為單行值描述stretch默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。center項(xiàng)目位于容器的中心。flex-start項(xiàng)目位于容器的開(kāi)頭。flex-end項(xiàng)目位于容器的結(jié)尾。baseline項(xiàng)目位于容器的基線上。flex-startflex-endcenterbaselinestretch（子元素高度為auto）三、CSS3彈性盒子常用屬性—justify-content屬性justify-content用于設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。值描述flex-start默認(rèn)值。項(xiàng)目位于容器的開(kāi)頭。flex-end項(xiàng)目位于容器的結(jié)尾。center項(xiàng)目位于容器的中心。space-between項(xiàng)目位于各行之間留有空白的容器內(nèi)。space-around項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。flex-startflex-endcenterspace-betweenspace-around四、彈性子元素屬性不詳細(xì)講述屬性描述order設(shè)置彈性盒子的子元素排列順序。flex-grow設(shè)置

溫馨提示

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

評(píng)論

0/150

提交評(píng)論