flex佈局踩過的那些坑

接觸H5項目後，開始瞭解到flex佈局，功能很是之強大，用起來至關之舒服。基本的知識介紹就不說了，參考http://www.ruanyifeng.com/blo...。

接下來講說我踩過的那些坑：

1.flex佈局版本兼容問題

flex佈局自2009提出以後，變化過好幾個版本：

**2009** version
標誌：**display: box**; 

**2011** version
標誌：**display: flexbox**; 

**2012** version
標誌：**display: flex/inline-flex**; 

2014 version
新增了對flex項z-index的規定

2015 W3C Editor’s Draft
（草案階段）

兼容方案：
父級flex佈局

display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;  /* OLD - Firefox 19- H5不用考慮 */
display: -mz-flexbox; /* TWEENER IE 10 */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

其餘屬性都對應相關的版本方案，目前項目中是隻寫最新的方案，由autoprefixer自動添加兼容方案。

2.關於flex-grow的寬度分配問題

flex-grow屬性用於設置或檢索彈性盒的擴展比率，默認爲0。不容許爲負值。
最爲常見的用法是用flex-grow實現等比例「tab」佈局，舉例：

<div class="box">
    <span class="item">元素</span>
    <span class="item">元素</span>
    <span class="item">元素</span>
    <span class="item">元素</span>
    <div class="item">元素</div>
    <div class="item">元素</div>
</div>

css:

.box {
    display: flex;
    align-items: center;
    padding: 40px 20px;
    color: white;
    background-color: black;
}
.item {
    flex-grow: 1;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid white;
    background-color: #ff0000;
}

不用懼怕浮動，不用考慮子元素是塊級元素仍是行內元素，顯示OK,無論外面flex父級寬度如何變化，它們都等比分佈：

糾正一下本身錯誤的理解，flex-grow是分配flex容器除內容外剩餘空間的比例，並非整個容器的比例[捂臉]，因此出現下面的現象是徹底正常的，雖然解決方案可行，但我依然不懂其中的原因，再次[捂臉]。。。

氮素，「意外」來了：

好奇怪，怎麼不是等比例顯示？你們flex-grow都是1，爲何你要佔那麼寬？
最後找到解決方案，全部flex-grow的子元素加上flex-basis: 0%;就是徹底等比分佈了，這個屬性值會讓父級主軸在計算剩餘空間時忽略子元素的自己寬度，從而實現等比分配。簡單寫法就是直接定義flex: 1;不分開定義三個屬性。固然若是是那種連串的英文就要設置word-break: break-all;。

3.設置了flex-grow元素的子級寬度問題

來，栗子：

<div class="box">
    <span class="other">Hi</span>
    <div class="item">
        <div class="text">
             一個flex-grow爲1的元素的子級一個flex-grow爲1的元素的子級一個flex-grow    爲1的元素的子級一個flex-grow爲1的元素的子級
        </div>
    </div>
</div>

css:

.box {
    display: flex;
    align-items: center;
    padding: 40px 20px;
    color: white;
    background-color: black;
}

.item {
    flex-grow: 1;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #ff0000;
}

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other {
    flex-shrink: 0;
    display: inline-block;
    width: 150px;
    height: 60px;
    line-height: 60px;
    background-color: orange;
}

大跌眼鏡的事就這麼發生了，flex-grow元素的子級竟然撐破了父級的寬度，超出去了，不知道該怎麼解釋這種現象：

解決方案就是，flex-grow元素設置overflow: hidden;效果：

最後一個小坑，算不上坑，就是父級設置了flex佈局後，子元素就算是行內元素不少瀏覽器能夠把它當作inline-block或者block元素來用，能夠直接設置它的寬高，可是仍是有些瀏覽器不支持，因此要設置行內元素的寬度，仍是手動設置一下它的display爲inline-block或者block.

flex佈局很是好用，就是PC兼容性相對較差，IE要10，甚至11以上纔有很好的兼容，不過你們能夠用它在H5頁面好好發揮。