《Web前端開發(fā)項目教程》彈性盒布局-使用彈性盒制作可擴展二級導航_第1頁
《Web前端開發(fā)項目教程》彈性盒布局-使用彈性盒制作可擴展二級導航_第2頁
《Web前端開發(fā)項目教程》彈性盒布局-使用彈性盒制作可擴展二級導航_第3頁
《Web前端開發(fā)項目教程》彈性盒布局-使用彈性盒制作可擴展二級導航_第4頁
《Web前端開發(fā)項目教程》彈性盒布局-使用彈性盒制作可擴展二級導航_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目07使用彈性盒布局二級導航菜單任務7-1使用彈性盒完成可擴展二級導航

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

display:flex;

width:450px;

height:auto;

border:1pxsolid;

flex-wrap：wrap;

}.flex-item{

width:200px;

height:125px;

margin:10px;

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

溫馨提示

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

評論

0/150

提交評論