收藏
批改狀態(tài)：合格
老師批語：你的所有代碼, 都在一行, 怎么看, 發(fā)完作業(yè), 不檢查回看一下嗎?
在彈性布局中c糊了可以再彈性容器中對相關(guān)的屬性進(jìn)行設(shè)置之外，還可以為彈性容器中的彈性元素進(jìn)行屬性設(shè)置，從而實(shí)現(xiàn)調(diào)整彈性元素的放大或縮小比例以及順序的設(shè)置等
flex-grow屬性用于設(shè)置彈性容器中彈性元素的增長因子，該屬性的默認(rèn)為值0，表示及時(shí)彈性容器中存在剩余空間，彈性元素也不會增長。
flex-grow屬性的語法格式如下：
flex-grow: 數(shù)值；
如果彈性容器中所有彈性元素的flex-grow屬性值都為1的話，表示所有的彈性元素都設(shè)置為一個(gè)大小相等的剩余空間。如果其中一個(gè)彈性元素設(shè)置為2，則這個(gè)彈性元素所占的剩余空間是其他彈性元素所占空間的2倍
flex-shirink屬性用于設(shè)置彈性容器的中的彈性元素的縮減因子，該屬性的默認(rèn)值為1，表示如果彈性容器中的剩余空間不足時(shí)，彈性元素會縮減以適合彈性容器。
flex-shrink屬性的語法格式如下：
flex-shrink: 數(shù)值；
如果彈性容器中所有彈性元素的flex-shrink屬性值設(shè)置為1，當(dāng)彈性容器的剩余空間不足時(shí)，彈性容器中的所有彈性元素都將等比例縮小，如果某一個(gè)彈性元素的flex-shrink屬性值設(shè)置為0時(shí)，其他的彈性元素的flex-shrink屬性值為1，，則當(dāng)彈性容器的剩余空間不足時(shí)，屬性值為0的彈性元素不縮小，而其他屬性值為1的彈性元素會縮小。我們能要特注意flex-shrink屬性不可以是負(fù)值。
flex-basis屬性用于設(shè)置彈性容器中的彈性元素的縮減基準(zhǔn)尺寸，也就是在分配彈性容器中的剩余空間之前彈性元素所占據(jù)的剩余空間，瀏覽器會根據(jù)該屬性計(jì)算彈性容器的主軸是否有剩余空間。
flex-basis屬性的語法格式如下：
flex-basis: auto | 長度值
flex-basis屬性的默認(rèn)值為auto，表示彈性元素顯示為自身的大小。
flex屬性是flex-grow、flex-shrink和flex-basis這三個(gè)屬性合并在一起的簡寫方式。
flex語法格式如下：
flex: none | flex-grow | flex-shrink | flex-basis
flex: 增長因子 縮減因子 基準(zhǔn)尺寸;
flex: flex-grow flex-shrink flex-basis;
flex: 0 1 auto; 第一個(gè)值表示增長因子為不增長，第二個(gè)值表示縮減因子為縮減，第三個(gè)值表示彈性元素的基準(zhǔn)尺寸顯示為自身的值
flex屬性的默認(rèn)值為0 1 auto，其中flex-shrink和flex-basis屬性為可選。flex屬性有幾個(gè)快捷值，也就是當(dāng)設(shè)置flex屬性值為auto時(shí)，相當(dāng)于flex:1 1 auto;；當(dāng)flex屬性設(shè)置為none時(shí)，相當(dāng)于flex:0 0 auto;；當(dāng)flex屬性設(shè)置為initial時(shí)，相當(dāng)于0 1 auto;；
下面使用flex屬性做一個(gè)圣杯布局，用到的屬性flex: auto; 相當(dāng)于flex: 1 1 auto;
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> body,html{ height: 100%; color: #fff; } #container{ height:100%; background-color:#36e; display: flex; justify-content: space-between; flex-direction: column; } #container > div:first-child, #container > div:last-child { border: 1px solid #3E3E3E; } #container .header{ height: 100px; background-color: #282828; } #container .main{ flex:auto; display: flex; } #container .footer{ height: 100px; background-color: #282828; } .main .left{ width: 200px; background-color: #282828; border-right: 1px solid #3e3e3e; } .main .center{ flex:auto; background-color:#1F1F1F; } .main .right{ width: 200px; background-color: #282828; border-left: 1px solid #3e3e3e; } </style></head><body> <div id="container"> <div class="header">頭部</div> <div class="main"> <div class="left">左邊</div> <div class="center">中間</div> <div class="right">右邊</div> </div> <div class="footer">頁腳</div> </div></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
默認(rèn)狀態(tài)下彈性元素是按照文檔流的結(jié)構(gòu)順序進(jìn)行排列顯示的，在彈性容器中可以通過為彈性元素使用order屬性來改變彈性元素在彈性容器中的順序。
order屬性語法格式如下：
order: 數(shù)值；
order屬性的屬性值默認(rèn)為0，可以是負(fù)數(shù)也可以是正數(shù)，數(shù)值越小排列越靠前。
HTML代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>order屬性</title></head><style> .box { display: flex; /* width: 500px; */ height: auto; } .ibox { width: 100px; height: 100px; background: orangered; color: wheat; line-height: 100px; text-align: center; font-weight: bold; flex: auto; margin: 10px; } .order { order: -1; border: royalblue 4px solid; }</style><body> <div class="box"> <div class="ibox">元素1</div> <div class="ibox">元素2</div> <div class="ibox">元素3</div> <div class="ibox">元素4</div> <div class="ibox">元素5</div> <div class="ibox">元素6</div> <div class="ibox">元素7</div> <div class="ibox">元素8</div> <div class="ibox">元素9</div> <div class="ibox order">元素10</div> </div></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
效果圖如下：
align-self屬性演示案例：
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>order屬性</title></head><style> .box { display: flex; width: 400px; background:seagreen; flex-flow: column nowrap; align-items: flex-end; } .ibox { width: 50px; height: 50px; background: orangered; color: wheat; line-height: 50px; text-align: center; font-weight: bold; margin: 10px; }.align-self-stat { align-self: flex-start;}.align-self-end { align-self: flex-end;}.align-self-center { align-self: center;}.align-self-stretch { align-self: stretch; width: auto;}</style><body> <div class="box"> <div class="ibox">1</div> <div class="ibox">2</div> <div class="ibox align-self-stat">3</div> <div class="ibox">4</div> <div class="ibox">5</div> <div class="ibox align-self-end">6</div> <div class="ibox align-self-center">10</div> <div class="ibox">1</div> <div class="ibox">2</div> <div class="ibox align-self-stretch">3</div> <div class="ibox">4</div> </div></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
效果如下：
實(shí)例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex-grow屬性案例</title></head><style> .box { display: flex; background: cornflowerblue; width: 600px; height: 100px; } .item { width: 100px; height: 100px; box-sizing: border-box; background: chocolate; color: #ffffff; border: darkorchid 1px solid; } .ff0 { flex-grow: 0; } .ff1 { flex-grow: 1; } .ff2 { flex-grow: 2; } .ff3 { flex-grow: 3; } .dff1 { flex-grow: 0.5; } .dff2 { flex-grow: 1.5; } .dff2 { flex-grow: 2.5; } .wt1 { width: 100px; } .wt2 { width: 200px; } .wt3 { width: 300px; } .wt4 { width: 400px; }</style><body> <h3>1增長因子為零</h3> <div class="box"> <div class="item ff0">1</div> <div class="item">2</div> <div class="item">3</div> </div> <h3>2將全部剩余空間分配給指定彈性元素,例如: 第二個(gè)</h3> <div class="box"> <div class="item">1</div> <div class="item ff1">2</div> <div class="item">3</div> </div> <h3>3全部剩余空間按增長因子在不同彈性元素間分配</h3> <div class="box"> <div class="item ff2">1</div> <div class="item ff1">2</div> <div class="item ff3">3</div> </div> <h3>4增長因子支持小數(shù), 因?yàn)槭前丛鲩L比例分配</h3> <div class="box"> <div class="item dff2">1</div> <div class="item dff1">2</div> <div class="item dff3">3</div> </div> <h3>5每個(gè)彈性元素寬度不同時(shí), 同樣適用以上分配規(guī)律</h3> <div class="box"> <div class="item dff2 wt1">1</div> <div class="item dff1 wt3">2</div> <div class="item dff3 wt4">3</div> </div></body></html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex-shrink屬性案例</title> <style> .box { display: flex; background: cornflowerblue; width: 400px; height: 100px; } .item { width: 100px; height: 100px; box-sizing: border-box; background: chocolate; color: #fbfbfb; border: darkorchid 1px solid; } .fb0 { flex-shrink: 0; } .fb1 { flex-shrink: 1; } .fb2 { flex-shrink: 2; } .fb3 { flex-shrink: 3; } .dfb1 { flex-shrink: 0.5; } .dfb2 { flex-shrink: 1.5; } .dfb2 { flex-shrink: 2.5; } .wt1 { width: 100px; } .wt2 { width: 200px; } .wt3 { width: 300px; } .wt4 { width: 400px; } .wt5 { width: 500px; } .wt6 { width: 600px; } .wt7 { width: 700px; } .wt8 { width: 800px; } </style></head><body> <h3>1增長因子為零</h3> <div class="box"> <div class="item fb0 ">1</div> <div class="item ">2</div> <div class="item ">3</div> </div> <h3>2所有彈性元素自適應(yīng)容器寬度且不換行,縮減因子: 1 (默認(rèn))</h3> <div class="box"> <div class="item fb1 wt4">1</div> <div class="item ">2</div> <div class="item ">3</div> </div> <h3>3當(dāng)三個(gè)彈性元素的縮減因?yàn)樽硬幌嗟葧r(shí)</h3> <div class="box"> <div class="item fb1 ">1</div> <div class="item fb2">2</div> <div class="item fb3 wt4">3</div> </div> <h3>4縮減因子也可以是小數(shù),只要大于就可以</h3> <div class="box"> <div class="item dfb1 ">1</div> <div class="item dfb2 wt2">2</div> <div class="item dfb3 wt4">3</div> </div> <h3>4縮減因子也可以是小數(shù),只要大于就可以</h3> <div class="box"> <div class="item dfb1 wt5">1</div> <div class="item dfb1 wt3">2</div> <div class="item dfb1 wt4">3</div> </div></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex-basis屬性案例</title> <style> .box { display: flex; background: cornflowerblue; width: 400px; height: 100px; } .item { width: 100px; height: 100px; box-sizing: border-box; background: chocolate; color: #fsfsfs; border: darkorchid 1px solid; } .fs0 { flex-basis: 100px; } .fs1 { flex-basis: 200px; } .fs2 { flex-basis: 300px; } .fs3 { flex-basis: 400px; } .dfs1 { flex-basis: 0.5; } .dfs2 { flex-basis: 1.5; } .dfs2 { flex-basis: 2.5; } .bfs0 { flex-basis: content; } .bfsa { flex-basis: auto; } .bfs1 { flex-basis: 10%; } .bfs2 { flex-basis: 20%; } .bfs3 { flex-basis: 30%; } .bfs4 { flex-basis: 40%; } .bfs5 { flex-basis: 50%; } .bfs6 { flex-basis: 60%; } .bfs7 { flex-basis: 70%; } .bfs8 { flex-basis: 80%; } .bfs9 { flex-basis: 90%; } .bfs10 { flex-basis: 100%; } .wt1 { width: 100px; } .wt2 { width: 200px; } .wt3 { width: 300px; } .wt4 { width: 400px; } .wt5 { width: 500px; } .wt6 { width: 600px; } .wt7 { width: 700px; } .wt8 { width: 800px; } </style></head><body> <h3>1在未設(shè)置彈性元素寬度時(shí), 以內(nèi)容寬度顯示</h3> <div class="box"> <div class="item bfs0">1</div> <div class="item bfs0">2</div> <div class="item bfs0">3</div> </div> <h3>2存在自定義元素寬度時(shí),則以該寬度顯示</h3> <div class="box"> <div class="item wt2 ">1</div> <div class="item wt2">2</div> <div class="item wt2">3</div> </div> <h3>3自動狀態(tài)下, 由瀏覽器根據(jù)預(yù)設(shè)值自行判定</h3> <div class="box"> <div class="item bfsa ">1</div> <div class="item bfsa">2</div> <div class="item bfsa ">3</div> </div> <h3>4當(dāng)元素存在自定義寬度與基準(zhǔn)寬度時(shí), 以基準(zhǔn)寬度為準(zhǔn)</h3> <div class="box"> <div class="item fs3 wt3 ">1</div> <div class="item fs3 wt3 ">2</div> <div class="item fs3 wt3 ">3</div> </div> <h3>5元素基準(zhǔn)寬度支持百分比設(shè)置</h3> <div class="box"> <div class="item bfs4 ">1</div> <div class="item bfs2 ">2</div> <div class="item bfs3 ">3</div> </div></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex屬性</title> <style> .box { display: flex; background: cornflowerblue; width: 400px; height: 100px; } .item { width: 100px; height: 100px; box-sizing: border-box; background: chocolate; color: #fbfbfb; border: darkorchid 1px solid; } .demo1>.item { width: 100px; height: 100px; flex: initial; } .demo2>.item { width: 100px; height: 100px; flex: auto; } .demo3>.item { width: 100px; height: 100px; flex: none; } .demo4>.item { width: 100px; height: 100px; flex: 1; } .demo5>.item { width: 100px; height: 100px; flex: 1 0 200px; } .demo6>.item { width: 100px; height: 100px; } .demo6>.item:first-of-type { flex: 1 1 50%; } </style></head><body> <h3>1根據(jù)寬度計(jì)算,允許縮減適應(yīng)容器</h3> <div class="box demo1"> <div class="item ">1</div> <div class="item ">2</div> <div class="item ">3</div> </div> <h3>2根據(jù)寬度計(jì)算,元素完全彈性以適應(yīng)容器</h3> <div class="box demo2"> <div class="item">1</div> <div class="item ">2</div> <div class="item ">3</div> </div> <h3>3元素完全失去彈性, 以原始大小呈現(xiàn)</h3> <div class="box demo3"> <div class="item ">1</div> <div class="item ">2</div> <div class="item ">3</div> </div> <h3>4一個(gè)數(shù)值表示增長因子,其它值默認(rèn): flex: 1 1 auto</h3> <div class="box demo4"> <div class="item ">1</div> <div class="item ">2</div> <div class="item ">3</div> </div> <h3>5第三個(gè)有具體數(shù)值時(shí), 以它為計(jì)算標(biāo)準(zhǔn)</h3> <div class="box demo5"> <div class="item ">1</div> <div class="item ">2</div> <div class="item ">3</div> </div> <h3>6單獨(dú)設(shè)置某一個(gè)元素彈性大小</h3> <div class="box demo6"> <div class="item ">1</div> <div class="item ">2</div> <div class="item ">3</div> </div></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
手寫代碼：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號