CSS3彈性伸縮布局(一)——box布局

本文轉載自查看原文 2015-08-23 00:02 30421 css3/ CSS3

CSS3彈性伸縮布局簡介

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

舊版本（box）

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

PS：瀏覽器兼容數據不一定很准確，不過相差不大。

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

html代碼：

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

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

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

此時刷新網頁看到的結果是這樣的：

這個結果很正常吧！OK，現在我們給div元素設置為box,看看有什么變化：

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

我們再次刷新網頁，結果是這樣的：

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

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

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

box : 將容器盒模型作為塊級彈性伸縮盒顯示
inline-box : 將容器盒模型作為內聯級彈性伸縮盒顯示

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

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

box-orient 屬性

box-orient屬性主要實現盒子內部元素的流動方向。

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

此時的結果就是垂直排列：

$KO$O4RM%C_DK3RL6{4NS`D6$

此屬性的屬性值有：

horizontal ：伸縮項目從左到右水平排列
vertical ：伸縮項目從上到下垂直排列
inline-axis ：伸縮項目沿着內聯軸排列顯示
block-axis ：伸縮項目沿着塊軸排列顯示

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

box-direction屬性

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

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

這樣我們的排序就是反序的了，運行結果為：

此屬性的屬性值有：

normal : 正常順序，默認值
reverse : 反序

box-pack屬性

box-pack 屬性用於伸縮項目的分布方式。

此屬性的屬性值有：

start : 伸縮項目以起始點靠齊
end : 伸縮項目以結束點靠齊
center : 伸縮項目以中心點靠齊
justify : 伸縮項目平局分布

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

1.start屬性值

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

這個就是默認靠齊方式：

2.end屬性值

div{
    -webkit-box-pack:

end

;
    box-pack:

end

;
}

這個就是以結束點靠齊：

3.center屬性值

div{
    -webkit-box-pack:

center

;
    box-pack:

center

;
}

這就是居中對齊效果：

4.justify屬性值

div{
    -webkit-box-pack:

justify

;
    box-pack:

justify

;
}

這個就是平均分布效果：

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

box-align屬性

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

此屬性的屬性值有：

start ：伸縮項目以頂部為基准，清理下部額外空間
end ：伸縮項目以底部為基准，清理上部額外空間
center ：伸縮項目以中部為基准，平均清理上下部額外空間
baseline ：伸縮項目以基線為基准，清理額外的空間
stretch ：伸縮項目填充整個容器，默認值

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

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是內嵌單軸或橫向，所有的子元素都置於他們的基線對齊。

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屬性值

所有子元素拉伸以填充包含區塊。

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

stretch

;
    box-align:

stretch

;
}

效果如下：

box-flex屬性

box-flex 屬性可以使用浮點數分配伸縮項目的比例。此屬性是給容器內的項目設置的，它們會基於父容器的寬度來分配它們所占的比例：

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;
}

效果如下：

$}GF4AT{PJ_HG0OGW~58J}}G$

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

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 屬性可以設置伸縮項目的顯示位置。

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元素排在了第一。可以單獨給某一個p元素設置此屬性，其他項目會按照原來的順序做變動。

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

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

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元素設置一個固定的高度：

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

那么這時的效果就是：

是不是很輕松就實現了這種效果呢！

小結

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

若需轉載，請注明出處，謝謝合作！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3彈性伸縮布局（二）——flex布局 css3彈性伸縮布局(一)—————flex布局 CSS3之彈性布局 CSS3 彈性盒子（Flex Box） flex布局總結 CSS3 伸縮盒子布局 CSS3(5)---伸縮布局(Flex) CSS3彈性盒布局 css3彈性盒布局 CSS：CSS彈性盒子布局 Flexible Box css3 彈性布局和多列布局