CSS3彈性伸縮佈局（二）——flex佈局

上一篇博客《CSS3彈性伸縮佈局（一）——box佈局》介紹了舊版本的box佈局，而這篇博客將主要介紹最新版本的flex佈局的基礎知識。

新版本簡介

新版本的Flexbox模型是2012年9月提出的工做草案，這個草案是由W3C 推出的最新語法。這個版本立志於指定標準，讓新式的瀏覽器全面兼容，在將來瀏覽器的更新換代中實現統一。

這裏咱們仍是繼續上一篇博客中的例子，使用最新版本的flex佈局來實現相同的效果。

html代碼：

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

基礎的css代碼：

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

此時咱們給div元素設置display屬性爲flex :

div{
    display:flex;
}

刷新瀏覽器後的效果是：

能夠看到效果跟舊版本的-webkit-box是同樣的。

在新版本中設置爲彈性伸縮盒的display屬性值有兩個：

• flex ： 將容器盒模型做爲塊級彈性伸縮盒顯示
• inline-flex ： 將容器盒模型做爲內聯級彈性伸縮盒顯示

看一下新版本的flex佈局的瀏覽器兼容狀況：

PS：能夠看到，在一些比較舊的webkit內核的瀏覽器（Chrome，Safari）中，咱們須要使用-webkit-flex來作兼容，可是這裏我就省略了。

下面將逐一介紹flex佈局的各個屬性的基礎用法：

flex-direction屬性

flex-direction屬性用於設置伸縮項目的排列方式。

div{
    display:flex;
    flex-direction:column;
}

效果以下：

結果就是容器內的全部項目按照從上到下排列的。

當你設置爲row-reverse時，效果就是：

這個是從瀏覽器的右邊往左邊排列的。

此屬性的屬性值有：

• row ： 設置從左到右排列
• row-reverse ： 設置從右到左排列
• column ： 設置從上到下排列
• column-reverse ： 設置從下到上排列

你們不妨都試一下，看看每個的效果如何。

flex-wrap屬性

flex-wrap屬性設置項目的換行方式（當容器寬度不足以容納全部子項目時）。

div{
    display:flex;
    flex-wrap:wrap;
}

此時結果以下：

能夠看到，當我把瀏覽器窗口縮小時，第三個p元素由於容納不下而被擠下來了。

此屬性的屬性值有：

• nowrap ： 默認值，都在一行或者一列中顯示
• wrap ： 伸縮項目沒法容納時，自動換行
• wrap-reverse ： 伸縮項目沒法容納時，自動換行，方向和wrap相反

當我將flex-wrap屬性設置爲wrap-reverse時，運行後的效果就是變成這樣：

flex-flow屬性

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的速記屬性。

div{
    display:flex;
    flex-flow:row wrap;
}

上面這個例子就至關於設置了flex-direction爲row，flex-wrap爲wrap。效果就是這樣的：

justify-content屬性

justify-content 在當靈活容器內的各項沒有佔用主軸上全部可用的空間時對齊容器內的各項（水平）。

div{
    display:flex;
    justify-content:space-around;
}

效果以下：

能夠看到全部項目平均分佈，並且兩端也有保留一半的空間。

此屬性的屬性值有：

• flex-start ： 伸縮項目以起始點靠齊
• flex-end ： 伸縮項目以結束點靠齊
• center ： 伸縮項目以中心點靠齊
• space-between ： 伸縮項目平均分佈
• space-around ： 伸縮項目平均分佈，但兩端保留一半的空間

由於這些效果仍是很容易就理解了，這裏我就不一一演示了。

align-items屬性

align-items 屬性規定靈活容器內的各項的默認對齊方式，和舊版本中的box-align同樣，處理伸縮項目容器的額外空間。

div{
    display:flex;
    align-items:center;
}

效果以下：

那麼，此屬性的屬性值有：

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

這些效果跟舊版本的box-align基本是同樣的，具體怎麼用，你們本身試一下就知道了。

align-self屬性

align-self 和align-items 同樣，都是清理額外空間，但它是單獨設置某一個伸縮項目的。全部的值和align-itmes 一致。

p:nth-child(2){
    align-self:center;
}

此時的效果就是：

其餘屬性值的效果同align-items，這裏就不贅述。

flex屬性

flex 屬性和舊版本中的box-flex 相似，用來控制伸縮容器的比例分配。

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

效果以下：

order屬性

order 屬性和舊版本的box-ordinal-group 屬性同樣控制伸縮項目出現的順序。

p:nth-child(1) {
    order: 2;
}
p:nth-child(2) {
    order: 3;
}
p:nth-child(3) {
    order: 1;
}

效果以下：

 

總結

flex佈局雖然目前的兼容性還不是很好，不過將來確定是很熱的佈局方式。本身也是最近才接觸flex佈局，爲了鞏固這些基本的知識點，我就寫了這兩篇博客。雖然我知道本身總結得不是很好，但主要仍是爲了方便本身和那些還沒接觸過flex佈局的博友們。

最後

在這裏我推薦一下阮一峯寫的兩篇關於flex佈局的博客，寫得很是好：

Flex 佈局教程：語法篇：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 佈局教程：實例篇：

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

若需轉載，請註明出處，謝謝！