Flexbox彈性佈局

　　Flexbox，一種CSS3的佈局模式，也叫作彈性盒子模型，用來爲盒裝模型提供最大的靈活性。最新版本兼容IE11+、firefox、safari、chrome、opera及移動端，但移動端ios7.1-8.4須要添加前綴-webkit-。

1.引入

　　經過對伸縮容器定義兩個屬性，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