CSS3彈性伸縮布局簡介

2009年，W3C提出了一種嶄新的方案----Flex布局（即彈性伸縮布局），它可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局，包括一直讓人很頭疼的垂直水平居中也變得很簡單地就迎刃而解了。但是這個布局方式還處于W3C的草案階段，并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。其中混合過渡版本主要是針對IE10做了兼容。目前flex布局用得比較多的還是在移動端的布局，所以本次主要講解一下舊版本和新版本在移動端使用的各個知識點(diǎn)，讓大家對神秘的flex布局熟悉起來。

舊版本（box）

首先看一下瀏覽器兼容情況：

PS：瀏覽器兼容數(shù)據(jù)不一定很準(zhǔn)確，不過相差不大。

下面將通過一個簡單的實(shí)例來講解舊版本的各個屬性：

html代碼：

<div><p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p><p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p><p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃</p> </div>

可以看到我們這個例子是很簡單的，一個div元素內(nèi)包含三個p元素，它們都是塊元素（block）。接下來給段落加一些基礎(chǔ)的樣式：

p{width:150px;border:3px solid lightblue;background:lightgreen;padding:5px;margin:5px; }

此時刷新網(wǎng)頁看到的結(jié)果是這樣的：

這個結(jié)果很正常吧！OK，現(xiàn)在我們給div元素設(shè)置為box,看看有什么變化：

div{display:-webkit-box;display:box; }

我們再次刷新網(wǎng)頁，結(jié)果是這樣的：

看到了吧，現(xiàn)在每一個p元素都變成一個box了，這就是彈性布局的神奇所在！

在上面中，我們將div元素的display設(shè)置為box，這就是舊版本的彈性布局。對于比較舊的瀏覽器版本，我們需要加上-webkit-前綴。

舊版本的彈性布局有兩個屬性值：

• ?box : 將容器盒模型作為塊級彈性伸縮盒顯示
• ? inline-box : 將容器盒模型作為內(nèi)聯(lián)級彈性伸縮盒顯示

PS：我們知道塊級它是占用整行的，比如div元素；而內(nèi)聯(lián)級不占用整行，比如span元素。但是我們設(shè)置了整個盒子，他們都不占用，保持一致。就像我們上面的例子一樣，給div元素設(shè)置了盒子，那么div元素里面的p元素就不占用了。

下面介紹舊版本彈性布局的各個屬性：

box-orient 屬性

box-orient屬性主要實(shí)現(xiàn)盒子內(nèi)部元素的流動方向。

div{display:-webkit-box;display:box;-webkit-box-orient:vertical;box-orient:vertical; }

此時的結(jié)果就是垂直排列：

此屬性的屬性值有：

• horizontal ： 伸縮項(xiàng)目從左到右水平排列
• ??? vertical? ： 伸縮項(xiàng)目從上到下垂直排列
• inline-axis ： 伸縮項(xiàng)目沿著內(nèi)聯(lián)軸排列顯示
• block-axis ： 伸縮項(xiàng)目沿著塊軸排列顯示

大家不妨試一下：horizontal 和 inline-axis 都是水平排列，而vertical 和 block-axis 都是垂直排列。

box-direction屬性

box-direction 屬性主要是設(shè)置伸縮容器中的流動順序。

div{display:-webkit-box;display:box;-webkit-box-direction:reverse;box-direction:reverse; }

這樣我們的排序就是反序的了，運(yùn)行結(jié)果為：

此屬性的屬性值有：

• normal? : 正常順序，默認(rèn)值
• reverse : 反序

box-pack屬性

box-pack 屬性用于伸縮項(xiàng)目的分布方式。

此屬性的屬性值有：

• start?? :? 伸縮項(xiàng)目以起始點(diǎn)靠齊
• ? end?? :? 伸縮項(xiàng)目以結(jié)束點(diǎn)靠齊
• center :? 伸縮項(xiàng)目以中心點(diǎn)靠齊
• justify? :? 伸縮項(xiàng)目平局分布

下面我們都試一下各個屬性值的效果：

1.start屬性值

div{-webkit-box-pack:start;box-pack:start; }

這個就是默認(rèn)靠齊方式：

2.end屬性值

div{-webkit-box-pack: end ;box-pack: end ; }

這個就是以結(jié)束點(diǎn)靠齊：

3.center屬性值

div{-webkit-box-pack: center ;box-pack: center ; }

這就是居中對齊效果：

4.justify屬性值

div{-webkit-box-pack: justify ;box-pack: justify ; }

這個就是平均分布效果：

PS:垂直方向上也是一樣的原理，但如果height為auto的話，效果將出不來。所以需要給height設(shè)置一個定高（最好比默認(rèn)情況高）。這時，就能看到在垂直方向上的效果了。這里我就不再贅述了。

box-align屬性

box-align 屬性用來處理伸縮容器的額外空間。

此屬性的屬性值有：

• ???? start? ： 伸縮項(xiàng)目以頂部為基準(zhǔn)，清理下部額外空間
• ???? end??? ： 伸縮項(xiàng)目以底部為基準(zhǔn)，清理上部額外空間
• ?? center ： 伸縮項(xiàng)目以中部為基準(zhǔn)，平均清理上下部額外空間
• baseline ： 伸縮項(xiàng)目以基線為基準(zhǔn)，清理額外的空間
• stretch? ： 伸縮項(xiàng)目填充整個容器，默認(rèn)值

同樣的，我們將試一下每個屬性值的效果：

1.start屬性值

div{display:-webkit-box;display:box;-webkit-box-align:start;box-align:start; }

效果如下：

2.end屬性值

div{display:-webkit-box;display:box;-webkit-box-align: end ;box-align: end ; }

效果如下：

3.center屬性值

div{display:-webkit-box;display:box;-webkit-box-align: center ;box-align: center ; }

效果如下：

4.baseline屬性值

如果box-orient是內(nèi)嵌單軸或橫向，所有的子元素都置于他們的基線對齊。

div{display:-webkit-box;display:box;-webkit-box-orient:horizontal;box-orient:horizontal;-webkit-box-align:baseline;box-align:baseline; }

效果如下：

而如果box-orient是塊軸或者垂直方向的，那么所有的子元素都將居中垂直排列。

div{display:-webkit-box;display:box;-webkit-box-orient: vertical ;box-orient:vertical;-webkit-box-align:baseline;box-align:baseline; }

效果如下：

5.stretch屬性值

所有子元素拉伸以填充包含區(qū)塊。

div{display:-webkit-box;display:box;-webkit-box-align: stretch ;box-align: stretch ; }

效果如下：

box-flex屬性

box-flex 屬性可以使用浮點(diǎn)數(shù)分配伸縮項(xiàng)目的比例。此屬性是給容器內(nèi)的項(xiàng)目設(shè)置的，它們會基于父容器的寬度來分配它們所占的比例：

p:nth-child(1){-webkit-box-flex:1;box-flex:1; } p:nth-child(2){-webkit-box-flex:3;box-flex:3; } p:nth-child(3){-webkit-box-flex:1;box-flex:1; }

效果如下：

當(dāng)然也可以有些項(xiàng)目是固定寬度的，那么其他的項(xiàng)目也會分配剩余的寬度，比如這里第一個p元素設(shè)置為固定寬度：

p:nth-child(2){-webkit-box-flex:2;box-flex:2; } p:nth-child(3){-webkit-box-flex:1;box-flex:1; }

效果如下：

更多使用情況，大家可以自己慢慢去嘗試。

box-ordinal-group 屬性

box-ordinal-group 屬性可以設(shè)置伸縮項(xiàng)目的顯示位置。

p:nth-child(1){-webkit-box-ordinal-group:2;box-ordinal-group:2; } p:nth-child(2){-webkit-box-ordinal-group:3;box-ordinal-group:3; } p:nth-child(3){-webkit-box-ordinal-group:1;box-ordinal-group:1; }

效果如下：

可以看到：第一個p元素排在了第二，第二個p元素排在了第三，第三個p元素排在了第一。可以單獨(dú)給某一個p元素設(shè)置此屬性，其他項(xiàng)目會按照原來的順序做變動。

OK，那么舊版本的所有屬性就簡單的介紹完了，更多結(jié)合的用法還是根據(jù)需要自己多動手去練習(xí)一下。

這里舉一個水平垂直居中的例子：

div{display:-webkit-box;display:box;height:500px;border:1px solid #f00;-webkit-box-pack:center;box-pack:center;-webkit-box-align:center;box-align:center; }

那么效果就是這樣的了：

此時我們再給p元素設(shè)置一個固定的高度：

p{width:150px;height:200px; }

那么這時的效果就是：

是不是很輕松就實(shí)現(xiàn)了這種效果呢！

小結(jié)

好的，到這里舊版本的彈性布局基礎(chǔ)知識點(diǎn)就都介紹了一下。由于篇幅過長，怕大家看著疲勞，新版本的彈性布局（flex）我將放在下一篇博客介紹。希望能幫到大家，同時盡請關(guān)注！

?

若需轉(zhuǎn)載，請注明出處，謝謝合作！

轉(zhuǎn)載于:https://www.cnblogs.com/jr1993/p/4751410.html

總結(jié)

以上是生活随笔為你收集整理的CSS3弹性伸缩布局(一)——box布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。