版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
項目07使用彈性盒布局二級導(dǎo)航菜單任務(wù)7-1使用彈性盒完成可擴(kuò)展二級導(dǎo)航
知識點掌握彈性盒布局的概念掌握彈性容器的常用屬性設(shè)置技能點學(xué)會使用彈性盒子進(jìn)行頁面布局并進(jìn)行樣式設(shè)置能夠根據(jù)需要選擇合適的頁面布局方式一、CSS3彈性盒子CSS彈性盒子布局是CSS3的模塊之一，定義了一種針對用戶界面設(shè)計而優(yōu)化的CSS盒子模型。在彈性布局模型中，彈性容器的子元素可以在行/列上排列，為了保證既能填滿未使用的空間，又避免父元素溢出，我們在開發(fā)中就必須要把它們設(shè)置成“可伸縮”的彈性盒子，能夠根據(jù)子菜單的項數(shù)改變它們的分布情況。網(wǎng)上商城左側(cè)導(dǎo)航二級子菜單的個數(shù)不固定，就可以將子菜單設(shè)置成“可伸縮”的彈性盒子，從而動態(tài)改變子菜單的寬度大小。二、CSS3彈性盒子內(nèi)容彈性盒子由彈性容器（Flexcontainer）和彈性子元素（Flexitem）組成。設(shè)置父級盒子的display屬性的值為flex或inline-flex可將其定義為彈性容器，彈性容器內(nèi)包含一個或多個彈性子元素。彈性子元素默認(rèn)在彈性盒子內(nèi)顯示為一行，無論子元素的寬度多少，都在一行內(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è)置單個子元素的表現(xiàn)行為。樣式屬性描述flex-direction指定彈性容器中子元素排列方式flex-wrap設(shè)置彈性盒子的子元素超出父容器時是否換行flex-flowflex-direction和flex-wrap的簡寫align-items設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式align-content修改flex-wrap屬性的行為，類似align-items,但不是設(shè)置子元素對齊，而是設(shè)置行對齊justify-content設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式彈性盒子父容器樣式屬性屬性描述order設(shè)置彈性盒子的子元素排列順序。flex-grow設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。flex-shrink指定了flex元素的收縮規(guī)則。flex元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù)flex-shrink的值。flex-basis用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。flex設(shè)置彈性盒子的子元素如何分配空間。align-self在彈性子元素上使用。覆蓋容器的align-items屬性。彈性子元素樣式屬性三、CSS3彈性盒子常用屬性—flex-direction屬性flex-direction 屬性用于指定彈性容器中子元素排列方式?？梢匀∷膫€值：（1）row：默認(rèn)值，設(shè)置伸縮盒對象的子元素在父容器中的水平分布并靠在父容器的左側(cè)（2）row-reverse：與row相同，但是以相反的順序。（3）column：設(shè)置伸縮盒對象的子元素在父容器中的垂直分布，由上向下排列。（4）column-reverse：與column相同，但是以相反的順序。rowrow-reversecolumncolumn-reverse三、CSS3彈性盒子常用屬性—flex-wrap屬性flex-wrap屬性設(shè)置彈性盒子的子元素超出父容器時是否換行/列?？梢匀∪齻€值：（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è)置彈性盒子的子元素超出父容器時是否換行/列?？梢匀∪齻€值：（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屬性設(shè)置彈性盒子的子元素超出父容器時是否換行/列?？梢匀∪齻€值：（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;}在主軸為行的情況下，如果我們將彈性容器的高度設(shè)為默認(rèn)值auto，則可以根據(jù)子元素內(nèi)容來擴(kuò)展彈性盒子的高度。三、CSS3彈性盒子常用屬性—flex-wrap屬性flex-wrap屬性設(shè)置彈性盒子的子元素超出父容器時是否換行/列?？梢匀∪齻€值：（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;}在主軸為列的情況下，固定彈性容器的高度，將其寬度設(shè)為默認(rèn)值auto，則可以根據(jù)子元素內(nèi)容來擴(kuò)展彈性盒子的寬度。三、CSS3彈性盒子常用屬性—flex-wrap屬性flex-wrap屬性設(shè)置彈性盒子的子元素超出父容器時是否換行/列?？梢匀∪齻€值：（3）wrap-reverse：設(shè)置伸縮盒對象的子元素在父容器中的位置水平/垂直逆序分布并靠在父容器的右/下側(cè)。效果與wrap正好相反。三、CSS3彈性盒子常用屬性—flex-flow屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為rownowrap。例如：.flex-container{flex-flow:<flex-direction><flex-wrap>}三、CSS3彈性盒子常用屬性—align-items屬性align-items屬性定義設(shè)置彈性盒子元素在垂直方向上的對齊方式。（適用于子元素排列為單行值描述stretch默認(rèn)值。項目被拉伸以適應(yīng)容器。center項目位于容器的中心。flex-start項目位于容器的開頭。flex-end項目位于容器的結(jié)尾。baseline項目位于容器的基線上。flex-startflex-endcenterbaselinestretch（子元素高度為auto）三、CSS3彈性盒子常用屬性—justify-content屬性justify-content用于設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式。值描述flex-start默認(rèn)值。項目位于容器的開頭。flex-end項目位于容器的結(jié)尾。center項目位于容器的中心。space-between項目位于各行之間留有空白的容器內(nèi)。space-around項目位于各行之前、之間、之后都留有空白的容器內(nèi)。flex-startflex-endcenterspace-betweenspace-around四、彈性子元素屬性不詳細(xì)講述屬性描述order設(shè)置彈性盒子的子元素排列順序。flex-grow設(shè)置
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 個人用水協(xié)議書
- 2024版水電清工承包合同范本
- 農(nóng)學(xué)研究之路
- 牛奶盛宴模板
- 2024年生態(tài)環(huán)保型綠化苗木種植承包合同3篇
- 碳金融風(fēng)險管理合同
- 裝飾材料采購合同范本
- 2024標(biāo)準(zhǔn)動力煤銷售協(xié)議樣式版B版
- 2024年股東權(quán)益分配協(xié)議：公司內(nèi)部股東分紅規(guī)定
- 2《我向國旗敬個禮》（說課稿）-2024-2025學(xué)年統(tǒng)編版道德與法治一年級上冊
- 復(fù)旦大學(xué)留學(xué)生(本科)漢語入學(xué)考試大綱
- 送達(dá)地址確認(rèn)書(完整版)
- 試講 關(guān)注合理營養(yǎng)與食品安全課件
- 2022年同等學(xué)力人員申請碩士學(xué)位日語水平統(tǒng)一考試真題
- 長距離輸氣管線工藝設(shè)計方案
- 北師大版小學(xué)五年級上冊數(shù)學(xué)第六單元《組合圖形的面積》單元測評培優(yōu)試卷
- 用特征方程求數(shù)列的通項
- 甲醇濃度密度對照表0~40
- 四年級奧數(shù)題(一)找規(guī)律
- 會計學(xué)原理課后習(xí)題與答案
- 縣領(lǐng)導(dǎo)在新錄用公務(wù)員培訓(xùn)班開班典禮上的講話
評論
0/150
提交評論