使用Flexbox：新舊語法混用實現最佳瀏覽器兼容

時間 2019-11-19

原文原文鏈接

本文由大漠根據Chris Coyier的《Using Flexbox: Mixing Old and New for the Best Browser Support》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：http://css-tricks.com/using-flexbox，以及做者相關信息css

——做者：Chris Coyierhtml

——譯者：大漠css3

Flexbox很是的棒，確定是將來佈局的一種主流。在過去的幾年這之中，語法改變了很多，這裏有一篇「舊」和「新」新的語法區別教程（若是你對英文不太感興趣，能夠移步閱讀中文版本）。可是，若是咱們把Flexbox新語法、舊語法和中間過渡語法混合在一塊兒使用，咱們就可讓瀏覽器獲得完美的展現。尤爲是對一個簡單的和最可能常見的實例：控制網格順序。web

HTML結構

一個具備語義化的容器「page-wrap」，包裹了三個主要區域，並將容器設置爲伸縮容器，此時容器中的每外區域自動變成了伸縮項目。瀏覽器

<div class="page-wrap">
  <section class="main-content" role="main">
    Main content: first in source order
  </section>
  <nav class="main-nav" role="navigation">
    Links
  </nav>
  <aside class="main-sidebar" role="complementary">
    Sidebar
  </aside>
</div>

咱們最終要實現的效果以下：ide

伸縮容器

咱們須要使用咱們的列在一個伸縮容器中顯示上下文。只有這樣，這些元素才能直接成爲伸縮項目。他們以前是什麼沒有關係，只要如今他們是伸縮項目。佈局

咱們須要把Flexbox舊的語法、中間過渡語法和最新的語法混在一塊兒使用，在這裏他們的順序顯得很是重要。「display」屬性自己並不添加任何瀏覽器前綴，咱們須要確保咱們老語法不要覆蓋新語法讓瀏覽器（可能老是會）同時支持。測試

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

控制列寬

咱們目標是製做一個20%、60%、20%網格佈局。flex

第一步設置咱們主內容區域寬度爲60%。網站

第二步設置側邊欄來填補剩餘的空間。

一樣把新舊語法混在一塊兒使用：

.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

在新的語法中，沒有必要給邊欄設置寬度，由於他們一樣會使用20%比例填充剩餘的40%空間。可是我發現，若是不給他們顯式的設置寬度，在老的語法下會直接崩潰。

重排列的順序

我但願主內容排列在中間，但在源碼之中他是排列在第一的位置。使用Flexbox能夠很是容易實現，可是咱們須要把Flexbox幾中不一樣的語法混在一塊兒使用：

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}

支持的瀏覽器

若是你將Flexbox多版本混合在一塊兒使用，能夠獲得如下瀏覽器的支持：

Chrome any
Firefox any
Safari any
Opera 12.1+
IE 10+
iOS any
Android any

最在的限制固然是IE瀏覽器了，但在其餘方面很好。若是你正在作一個特定的移動版本網站，你也會獲得更好的支持。若是有誰在window版本手機上測試，麻煩告訴我一下測試結果。

Firefox19有點問題，你須要在觀察一下它。例如，在這個案例中，我沒法近死側邊欄爲20%。這個只是摺疊到內容的寬度裏，這樣說或許有點武斷。我須要設置「-moz-box-flex:1」，不然主內容（60%）會伸展到和最寬的段落，就像是段落設置了「white-space:nowrap」，這一點簡直是莫名其妙。