flexbox佈局模式-- 淺談

簡介

Flexbox，一種CSS3的佈局模式，也叫作彈性盒子模型，用來爲盒裝模型提供最大的靈活性。今天主要從如下幾個方面簡單談談flex.

• 1 版本更迭
• 2 flex容器
• 3 flex項目
• 4 flex佈局兼容性

版本更迭

flexbox佈局的語法規範通過幾年發生了很大的變化。從2007年07月，flex初版本的工做草案發布，到2012年09月，flex最新版本成爲候選推薦。flex主要經歷了三個版本：

• 1 舊版本 display:box | inline-box; IE瀏覽器不支持，windows下的safari瀏覽器只支持舊版本的寫法且須要添加前綴，移動端能夠兼容到andriod2.1-4.3和ios3.2-6.1也須要添加前綴
• 2 混合版本 display:flexbox | inline-flexbox; 該版本只有IE10支持，且須要添加前綴-ms-
• 3 新版本 display: flex | inline-flex 　　該版本兼容IE11+、firefox、safari、chrome、opera及移動端，但移動端ios7.1-8.4須要添加前綴-webkit-

flex內容

1 引入

咱們以前用css給元素居中定位，常常用的方法是經過position和margin配合使用的那一種。舉例以下：

<style>

    .parent{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
    .child{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top:-50px;
    }
</style>

    
</style>
<div class="parent">

    <div class="child"></div>

</div>

假如使用了flex後，實現起來就簡單了，並且不須要本身去算，也不須要絕對定位，只須要經過對伸縮容器定義兩個屬性，justify-content定義伸縮項目沿着主軸線的對齊方式爲center， align-items定義伸縮項目在側軸（垂直於主軸）的對齊方式爲center，具體以下：

<style>
    .parent{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        display: flex;  //須要將display值定爲flex
        justify-content:center;
        align-items:center;
    }
    .child{
        width: 200px;  //寬度能夠爲任意
        height: 100px; //高度能夠爲任意
        border: 1px solid #000;    
    }
</style>
<div class="parent">
    <div class="child"></div>
</div>

首先咱們來分析下面這一張圖，從第一個子節點能夠看到Flexbox由Flex容器和Flex項目組成，容器即父元素，項目即子元素。他們之間的一些關係能夠這樣來表示：

2 伸縮容器

　　display:flex

當咱們使用flexbox佈局時候，須要先給父容器的display值定位flex（塊級）或者inline-flex（行內級）。當使用了這個值之後，伸縮容器會爲內容創建新的伸縮格式化上下文（FFC flex formatting context普通流的一種）

主要表如今如下幾點:

　　[1]float、clear和vertical-align屬性在伸縮項目上沒有效果

　　[2]伸縮容器的margin與其內容的margin不會重疊

　　[3]text-align屬性在伸縮容器上沒有效果，由於其只可應用於塊級block容器

　　[4]另外，conlumns屬性伸縮容器上沒有效果

　　彈性盒模型的兩種容器塊級伸縮容器和內聯伸縮容器的區別相似於block和inline-block的區別，一個獨佔一行，另外一個非獨佔一行

如下6個屬性做用在伸縮容器上

• 伸縮流方向 flex-direction
• 伸縮流換行 flex-wrap 　　
• 伸縮流(包括方向與換行) flex-flow 　　
• 主軸對齊 justify-content 　　
• 側軸對齊 align-items 　　
• 堆棧伸縮行 align-content

3 伸縮項目

如下6個屬性做用在伸縮容器上

• 自身側軸對齊方式 align-self 　　
• 伸縮基準值 flex-basis 　　
• 擴展比率 flex-grow 　　
• 收縮比率 flex-shrink 　　
• 伸縮性 flex 　　
• 顯示順序 order

具體每一個屬性的取值以及做用，在這裏就不一一解釋了，上傳一個含有詳細內容的文檔，供想要了解的人蔘考。

http://files.cnblogs.com/files/clearsky/flex.zip

 

 

具體能夠參照這個圖：

Flex兼容性

具體你們能夠見這個網站：caniuse（http://caniuse.com/#search=flexb ox）  在PC端其實很樂觀了，基本上主流的瀏覽器都已經兼容了flex的使用，可是到了移動端就不是那麼好了，特別是國內瀏覽器，考慮到uc瀏覽器佔了大頭，可是uc從圖中看到只兼容flex最老的一個版本，也就是2009年的版本，即display:box;不少如今flex的優秀特性到了它上面都不兼容了，因此建議你們在使用的時候，假如2009版本能夠知足開發要求的話，仍是去使用2009版本，這樣風險更小。  可是假如想兼容多個瀏覽器，能夠採用優雅降級的方式來使用，這裏推薦一個scss的sass-flex-mixin,這樣就能夠使用最新的寫法，而且兼容大部分瀏覽器了。