詳細(xì)介紹CSS3彈性伸縮box布局
來源 | https://www.cnblogs.com/jr1993/p/4751410.html
CSS3彈性伸縮布局簡介
2009年，W3C提出了一種嶄新的方案----Flex布局（即彈性伸縮布局），它可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局，包括一直讓人很頭疼的垂直水平居中也變得很簡單地就迎刃而解了。
但是這個(gè)布局方式還處于W3C的草案階段，并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。
其中混合過渡版本主要是針對IE10做了兼容。
目前flex布局用得比較多的還是在移動(dòng)端的布局，所以本次主要講解一下舊版本和新版本在移動(dòng)端使用的各個(gè)知識(shí)點(diǎn)，讓大家對神秘的flex布局熟悉起來。
首先看一下瀏覽器兼容情況：
PS：瀏覽器兼容數(shù)據(jù)不一定很準(zhǔn)確，不過相差不大。
下面將通過一個(gè)簡單的實(shí)例來講解舊版本的各個(gè)屬性：
html代碼：
<div><p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p><p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p><p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃</p></div>
可以看到我們這個(gè)例子是很簡單的，一個(gè)div元素內(nèi)包含三個(gè)p元素，它們都是塊元素（block）。接下來給段落加一些基礎(chǔ)的樣式：
p{width:150px;border:3px solid lightblue;background:lightgreen;padding:5px;margin:5px;}
此時(shí)刷新網(wǎng)頁看到的結(jié)果是這樣的：
這個(gè)結(jié)果很正常吧！OK，現(xiàn)在我們給div元素設(shè)置為box,看看有什么變化：
div{display:-webkit-box;display:box;}
我們再次刷新網(wǎng)頁，結(jié)果是這樣的：
看到了吧，現(xiàn)在每一個(gè)p元素都變成一個(gè)box了，這就是彈性布局的神奇所在！
在上面中，我們將div元素的display設(shè)置為box，這就是舊版本的彈性布局。對于比較舊的瀏覽器版本，我們需要加上-webkit-前綴。
舊版本的彈性布局有兩個(gè)屬性值：
box : 將容器盒模型作為塊級(jí)彈性伸縮盒顯示
inline-box : 將容器盒模型作為內(nèi)聯(lián)級(jí)彈性伸縮盒顯示
PS：我們知道塊級(jí)它是占用整行的，比如div元素；而內(nèi)聯(lián)級(jí)不占用整行，比如span元素。但是我們設(shè)置了整個(gè)盒子，他們都不占用，保持一致。就像我們上面的例子一樣，給div元素設(shè)置了盒子，那么div元素里面的p元素就不占用了。
下面介紹舊版本彈性布局的各個(gè)屬性：
box-orient 屬性
box-orient屬性主要實(shí)現(xiàn)盒子內(nèi)部元素的流動(dòng)方向。
div{display:-webkit-box;display:box;-webkit-box-orient:vertical;box-orient:vertical;}
此時(shí)的結(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è)置伸縮容器中的流動(dòng)順序。
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)目平局分布
下面我們都試一下各個(gè)屬性值的效果：
1.start屬性值
div{-webkit-box-pack:start;box-pack:start;}
這個(gè)就是默認(rèn)靠齊方式：
2.end屬性值
div{-webkit-box-pack:end;box-pack:end;}
這個(gè)就是以結(jié)束點(diǎn)靠齊：
3.center屬性值
div{-webkit-box-pack:center;box-pack:center;}
這就是居中對齊效果：
4.justify屬性值
div{-webkit-box-pack:justify;box-pack:justify;}
這個(gè)就是平均分布效果：
PS:垂直方向上也是一樣的原理，但如果height為auto的話，效果將出不來。所以需要給height設(shè)置一個(gè)定高（最好比默認(rèn)情況高）。這時(shí)，就能看到在垂直方向上的效果了。這里我就不再贅述了。
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)目填充整個(gè)容器，默認(rèn)值
同樣的，我們將試一下每個(gè)屬性值的效果：
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è)置的，它們會(huì)基于父容器的寬度來分配它們所占的比例：
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)目也會(huì)分配剩余的寬度，比如這里第一個(gè)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;}
效果如下：
可以看到：第一個(gè)p元素排在了第二，第二個(gè)p元素排在了第三，第三個(gè)p元素排在了第一?？梢詥为?dú)給某一個(gè)p元素設(shè)置此屬性，其他項(xiàng)目會(huì)按照原來的順序做變動(dòng)。
OK，那么舊版本的所有屬性就簡單的介紹完了，更多結(jié)合的用法還是根據(jù)需要自己多動(dòng)手去練習(xí)一下。
這里舉一個(gè)水平垂直居中的例子：
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;}
那么效果就是這樣的了：
此時(shí)我們再給p元素設(shè)置一個(gè)固定的高度：
p{width:150px;height:200px;}
那么這時(shí)的效果就是：
是不是很輕松就實(shí)現(xiàn)了這種效果呢！
小結(jié)
好的，到這里舊版本的彈性布局基礎(chǔ)知識(shí)點(diǎn)就都介紹了一下。
