站長(zhǎng)資訊網(wǎng)彈性盒子模型
布局方案
傳統(tǒng)的布局方案大多采用div+css+float+position+display來(lái)實(shí)現(xiàn)，但是隨著css3中彈性盒子模型的推出，在前端布局方案中就又多出了一項(xiàng)彪悍的選項(xiàng)。
而因?yàn)樽罱谘芯啃〕绦?，發(fā)現(xiàn)中間使用彈性盒子布局效果更好效率更高一點(diǎn)，所以就將之前學(xué)習(xí)彈性盒模型的相關(guān)知識(shí)點(diǎn)整理出來(lái)，給大家分享。
彈性盒模型flex布局介紹
彈性盒模型(flexbox)又稱(chēng)為彈性布局，是css3中新提出的一種布局方式，通過(guò)彈性布局，可以讓子元素自動(dòng)調(diào)整寬度和高度，從而達(dá)到很好的填充任何不同屏幕大小的顯示設(shè)備的顯示空間。
彈性盒模型與之前的布局方式是完全不同的兩種，雖然依然采用div+css的方式，但是卻將之前使用的浮動(dòng)給替換成了彈性布局。從而使頁(yè)面元素布局方式更加的簡(jiǎn)單。
不同于我們后面所學(xué)習(xí)的網(wǎng)格系統(tǒng)，彈性布局更加適用于應(yīng)用組件以及小比例布局。
在之前,flex經(jīng)歷了三次迭代，每一次迭代都產(chǎn)生了不同的語(yǔ)法，目前我們學(xué)習(xí)遵循最終版本的語(yǔ)法。因?yàn)橹鞍姹驹谑褂玫臅r(shí)候需要考慮兼容問(wèn)題，而最新版本，所有的瀏覽器都支持無(wú)前綴的終極規(guī)范。
彈性盒子模型認(rèn)知
flex布局方式是一個(gè)完整的布局模塊，而不是只某個(gè)屬性。flex的布局主要依靠父容器和元素組成。
父容器稱(chēng)之為flex container(flex容器) 而其子元素稱(chēng)之為flex item(flex元素)。
而整個(gè)flex布局的核心在于 對(duì)其方式、排布和順序。
彈性盒子模型的使用
想要使用flex布局，首先要使用display:flex 或者 display:inline-flex來(lái)設(shè)置父容器。
display:flex 給父元素設(shè)置完成后，那么整個(gè)父元素會(huì)變成彈性容器，但是是一個(gè)塊級(jí)元素。
display:inline-flex給父元素設(shè)置完成后，那么整個(gè)父元素會(huì)變成彈性容器，但是是一個(gè)行內(nèi)塊級(jí)元素，有些類(lèi)似于inline-block的效果。
當(dāng)父容器設(shè)置了這個(gè)屬性之后，里面的子元素默認(rèn)的全部變成flex item (flex元素)
Tip:flex布局與我們之前所學(xué)習(xí)的布局方式是屬于另外一套布局方案，所以在使用了flex布局之后，如Block”，“inline”，“float” 和 “text-align” 等一些屬性會(huì)失效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container-flex { width: 600px; border:1px solid #ccc; display:flex; } .container-inline { width: 600px; border:1px solid #ccc; display:inline-flex; } .container-flex div { width: 200px; height: 200px; background-color: orange; } .container-inline div { width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="container-flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="container-flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="container-inline"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="container-inline"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
執(zhí)行的效果如下：
必備名詞解釋
在使用彈性盒子模型之前，需要了解一些彈性盒模型的基礎(chǔ)概念名詞。
main axis 主軸
cross axis 交叉軸/側(cè)軸 與主軸垂直
main start 主軸起點(diǎn)邊
main end 主軸終點(diǎn)邊
cross start 交叉軸起點(diǎn)邊
cross end 交叉軸終點(diǎn)邊
為什么使用彈性盒子模型
彈性盒子模型在開(kāi)發(fā)手機(jī)端的時(shí)候使用頻率較高，在微信小程序開(kāi)發(fā)的時(shí)候也是使用頻率非常高的技術(shù)，可以通過(guò)幾個(gè)實(shí)例來(lái)看一下彈性盒子的好處：
實(shí)例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> </body> </html>
代碼結(jié)果如下：
在上述實(shí)例中需要注意的點(diǎn)：
① 啟用flex布局 display:flex
② 父元素的子元素在父元素設(shè)置了display:flex之后，子元素會(huì)自動(dòng)的變?yōu)閺椥院凶拥淖釉兀?br />被稱(chēng)為flex items
③ 默認(rèn)情況，所有的 flex-item 會(huì)按照 flex 容器的頂部和左側(cè)對(duì)齊。
實(shí)例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; justify-content:flex-start;/*默認(rèn)*/ justify-content:flex-end;/*在主軸的末端對(duì)其*/ justify-content:center;/*在主軸的中間對(duì)其*/ justify-content:space-between;/*在整個(gè)主軸中平均分配空間，無(wú)論其中有多少個(gè)元素*/ justify-content:space-around;/*Flex-item 默認(rèn)會(huì)被均勻的分布，但是每一個(gè) 都會(huì)在其給定的空間內(nèi)居中顯示。*/ align-items:center;/*讓items在垂直方向上居中*/ } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> </body> </html>
代碼效果如下：
我們可以通過(guò)非常簡(jiǎn)單的屬性設(shè)置來(lái)調(diào)整對(duì)其方式，例如：
justify-content: flex-start / flex-end /center /space-between /space-around
我們也可以通過(guò)align-items:center 屬性讓 items 在垂直方向居中。
實(shí)例3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; justify-content:flex-start;/*默認(rèn)*/ justify-content:flex-end;/*在主軸的末端對(duì)其*/ justify-content:center;/*在主軸的中間對(duì)其*/ justify-content:space-between;/*在整個(gè)主軸中平均分配空間，無(wú)論其中有多少個(gè)元素*/ justify-content:space-around;/*Flex-item 默認(rèn)會(huì)被均勻的分布，但是每一個(gè) 都會(huì)在其給定的空間內(nèi)居中顯示。*/ align-items:center;/*讓items在垂直方向上居中*/ } .square { width: 200px; height: 200px; background-color: orange; order: -1; /*讓正方形顯示在第一位而不是中間*/ } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> </body> </html>
實(shí)例3 和 實(shí)例2 大體相似，但是在.square類(lèi)里存在一句order:-1，可以更改元素的渲染順序。這個(gè)是彈性盒模型中一個(gè)非常厲害的一個(gè)方面。
實(shí)例3代碼效果如下：
flex布局方式屬性
在flex整個(gè)體系當(dāng)中，大體上可以分為兩類(lèi)，一類(lèi)是給父容器設(shè)置的屬性，一類(lèi)是給父容器中子元素設(shè)置的屬性。
彈性容器屬性 — 給父元素設(shè)置的屬性
1.flex-direction 定義內(nèi)部元素如何在flex容器中布局，定義了主軸的方向(是正是反)。
語(yǔ)法：
row | row-reverse | column | column-reverse
row 默認(rèn)值，子元素會(huì)排列在一行 從主軸左側(cè)開(kāi)始
row-reverse 子元素會(huì)排列在一行。不過(guò)是從右側(cè)開(kāi)始
column 子元素垂直顯示，從側(cè)軸起始點(diǎn)開(kāi)始
column-reverse 垂直顯示，不過(guò)從結(jié)束點(diǎn)開(kāi)始
實(shí)例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { width: 100%; height: 500px; border:1px solid #ccc; display:flex; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; } .container div { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
2.flex-wrap 控制容器內(nèi)的子元素是被強(qiáng)制放在一行中或者是被放在多個(gè)行上 。如果允許換行，這個(gè)屬性允許你控制行的堆疊方向。
語(yǔ)法：
nowrap | wrap | wrap-reverse
nowrap 所有的元素被擺在一行 默認(rèn)值
wrap 當(dāng)一行元素過(guò)多，則允許元素 換行
wrap-reverse 將側(cè)軸起點(diǎn)和終點(diǎn)顛倒
實(shí)例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { width: 600px; height: 500px; border:1px solid #ccc; display:flex; flex-wrap:wrap; flex-wrap:wrap-reverse; } .container div { width: 200px; height: 100px; background-color: orange; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </body> </html>
3.justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周?chē)目臻g。
語(yǔ)法：
flex-start | flex-end | center | space-between | space-around
flex-start : 從行首開(kāi)始排列。每行第一個(gè)彈性元素與行首對(duì)齊，同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊。默認(rèn)
flex-end : 從行尾開(kāi)始排列。每行最后一個(gè)彈性元素與行尾對(duì)齊，其他元素將與后一個(gè)對(duì)齊
center : 伸縮元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同
space-between : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素與行首 對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。
space-around : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半。
實(shí)例代碼:
參考上面的實(shí)例2.
4.align-items 屬性以與justify-content相同的方式在側(cè)軸方向上將當(dāng)前行上的彈性元素對(duì)齊。
語(yǔ)法：
flex-start | flex-end | center | baseline | stretch
align-items: flex-start; 對(duì)齊到側(cè)軸起點(diǎn)
align-items: flex-end; 對(duì)齊到側(cè)軸終點(diǎn)
align-items: center; 在側(cè)軸上居中
align-items: baseline; 與基準(zhǔn)線(xiàn)對(duì)齊
align-items: stretch; 拉伸元素以適應(yīng) 默認(rèn)值
實(shí)例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #item-container { display: flex;/*啟用flex布局*/ background-color: pink; justify-content:space-around; align-items:baseline;/*與基準(zhǔn)線(xiàn)對(duì)齊*/ } .square { width: 200px; height: 200px; background-color: orange; } .circle { border-radius: 50%; width: 150px; height: 150px; background-color: green; } .container { width: 500px; height: 600px; border:1px solid #ccc; display:flex; align-items: stretch; } .container div { width: 100px; background-color:red; border:1px solid green; } </style> </head> <body> <div id="item-container"> <div class="circle"></div> <div class="square"></div> <div class="circle"></div> </div> <!-- <div class="container"> <div>1</div> <div>2</div> </div> --> </body> </html>
5.align-content 多行對(duì)其方式，如果只有一行，則失效。
語(yǔ)法：
flex-start | flex-end | center | space-between | space-around | stretch
flex-start : 與交叉軸的起點(diǎn)對(duì)其
flex-end : 與交叉軸的終點(diǎn)對(duì)其
center : 與交叉軸的中點(diǎn)對(duì)其
space-between : 與交叉軸兩端對(duì)其，軸線(xiàn)之間的間隔平均分布
space-around: 所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的距離是相鄰兩行間距的一半。
stretch ：拉伸所有行來(lái)填滿(mǎn)剩余空間。剩余空間平均的分配給每一行
實(shí)例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container { width: 600px; height: 900px; border:1px solid #ccc; display:flex; flex-wrap:wrap; align-content:flex-start; align-content:flex-end; align-content:center; align-content:space-between; align-content:space-around; align-content:stretch; /*默認(rèn)*/ } .container div { width: 200px; height: 80px; background-color: orange; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> </body> </html>
彈性元素屬性 — 給子元素設(shè)置的屬性
order order屬性規(guī)定了彈性容器中的可伸縮項(xiàng)目在布局時(shí)的順序。元素按照order屬性的值的增序進(jìn)行布局。擁有相同order屬性值的元素按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行布局。
語(yǔ)法：
order:
align-self 定義flex子項(xiàng)單獨(dú)在側(cè)軸（縱軸）方向上的對(duì)齊方式
語(yǔ)法：
stretch|center|flex-start|flex-end|baseline
flex-grow 定義彈性盒子元素?cái)U(kuò)展比率
flex-shrink 定義彈性盒子元素的收縮比率
flex-basis 指定了flex item在主軸方向上的初始大小。如果不使用box-sizing來(lái)
改變盒模型的話(huà)，那么這個(gè)屬性就決定了flex item的內(nèi)容盒content-box）的寬 或者高（取決于主軸的方向）的尺寸大小。
Tip:需要注意的是，在上面的最后的flex-grow、flex-shrink、flex-basis 三個(gè)屬性最好相互搭配使用。
實(shí)例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } #main div:nth-of-type(2) { flex-shrink: 3; } </style> </head> <body> <div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:khaki;"></div> <div style="background-color:pink;"></div> <div style="background-color:lightgrey;"></div> </div> </body> </html>
ok，上面大概就是一些常用的彈性盒子模型flex-box常用的屬性，上面的實(shí)例很多只是給了代碼，沒(méi)有給效果圖，是因?yàn)橄Ｍ趯W(xué)習(xí)彈性盒子模型的同志們最好把代碼實(shí)際的敲一下，并且親自嘗試不同的屬性值，來(lái)分析不同屬性帶來(lái)的不同的效果。
彈性盒子模型難度不大，但是卻與傳統(tǒng)的布局方案有很大的差別。
