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

時間 2019-12-10

標籤 css3 css 彈性伸縮佈局 box 欄目 CSS 简体版

原文原文鏈接

CSS3彈性伸縮佈局簡介html

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

舊版本（box）瀏覽器

首先看一下瀏覽器兼容狀況：佈局

PS：瀏覽器兼容數據不必定很準確，不過相差不大。flex

下面將經過一個簡單的實例來說解舊版本的各個屬性：編碼

html代碼：spa

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

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

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

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

這個結果很正常吧！OK，如今咱們給div元素設置爲box,看看有什麼變化：orm

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