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

 

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