flex布局踩過的那些坑

劉玉平發布于2019-08-29 11:07 / 2916人閱讀

摘要：接下來說說我踩過的那些坑布局版本兼容問題布局自提出之后，變化過好幾個版本標志標志標志新增了對項的規定草案階段兼容方案父級布局不用考慮其他屬性都對應相關的版本方案，目前項目中是只寫最新的方案，由自動添加兼容方案。

接觸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”布局，舉例：


    元素
    元素
    元素
    元素
    元素
    元素

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元素的子級寬度問題

來，栗子：


    Hi
    
        
             一個flex-grow為1的元素的子級一個flex-grow為1的元素的子級一個flex-grow    為1的元素的子級一個flex-grow為1的元素的子級

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頁面好好發揮。

GPU云服務器云服務器云服務器踩過的坑 flex布局 -坑 cdn坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111436.html

【echarts3】折線圖我踩過的那些坑（tooltip 設置，line 單個點/散點不顯示問題

摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線為主，對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰，官方示例也很豐富，中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線...

isaced 2019-08-02 15:58 評論0 收藏0
【echarts3】折線圖我踩過的那些坑（tooltip 設置，line 單個點/散點不顯示問題

摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線為主，對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰，官方示例也很豐富，中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線...

MonoLog 2019-08-21 17:52 評論0 收藏0
Docker初體驗——踩過的那些坑！

摘要：原因其實這個報錯不需要下載最新文件，而是文件沒有放到正確的位置。重啟電腦后按或進入界面不同主板型號進入所需按鍵不同。端口映射環境下可能不存在這個問題坑在下部署了應用服務并進行了端口映射。 2018?年?3?月?6?日 Docker安裝環境：windows7 安裝包：DockerToolbox-17.10.0-ce.exe （下載地址：http://mirrors.aliyun.co...

Jrain 2019-06-28 17:55 評論0 收藏0
那些年我們踩過的亂碼坑

摘要：因此導致亂碼的真正原因就是各平臺間對標準實現不一致包括實現的時間先后不同，以及所代表含義不同。日本幾家公司各自定義了一套標準，用兩個字節表示符號，日本電腦系統的一種編碼編碼是從到。在上找到了與標準的對應關系。歡迎關注個人網站：http://www.iamaddy.net/2016/07/emoji-unicode-parser/ 前言這是一個由亂碼引發的故事。抱歉我暫時找不到更加慘...

jhhfft 2019-08-19 18:24 評論0 收藏0