Flexbox模塊的最新教程？

Question

我知道Flexible Box Layout module規範已更改，並且一些瀏覽器現在實現了多個版本（使用不同的語法）。我一直在尋找信息，但我只能找到警告的教程，他們現在已經過時了。

我知道規格可能會改變，但我有一個不尋常的用例（一個Chrome擴展），我想用它的當前形式。我只想知道如何使用Chrome中實現的最新版本。

有誰知道最新的教程？

Answer 1

這裏是最好的flexbox tutorial我發現到目前爲止，這是非常好的解釋或如果你需要更深入的解釋檢查w3c draft。

並且爲了測試和更好地理解flexbox模型，請檢查此flexbox playground。

Answer 2

Flexbox模塊尚未過時。新模式的實施需要時間，可能需要一年時間才能實施。

W3C始終擁有關於標準的文檔以及可能無法實現的事物的註釋。

以下是目前的Flexbox Layout Module。

下面是新規範Flexbox Layout Module 2012的編輯草案。

Answer 3

致謝html5please.com，這聽起來像Flexbox規範被認爲是穩定的，並有Opera和Mozilla教程。

注意我不確定爲什麼html5please仍然建議避免。其文本似乎暗示了相反的意思。

Answer 4

因爲實施過去已經發生變化，所以知道flexbox的兩個主要實現。 This page提供了一些關於舊實現和新實現的背景信息。

我找到了Flexbox here實施當前狀態的很好教程。一個頁面（demo on Codepen here）的HTML結構的

示例代碼：

<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> 

劃分page-wrap在3個與main-nav兩倍大的側邊欄，我們可以使用Flexbox的。另一個優點是main-content元素在DOM中的位置在main-nav之前，但是使用flexbox我們可以在內容之前渲染它。這對屏幕閱讀器很有用，所以首先閱讀內容。

我們需要使page-wrap爲flexbox上下文。這樣，所有的孩子都成爲彈性盒子物品：

.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+ */ 
} 

屬性的順序很重要。由於某些瀏覽器支持這兩種實現，因此我們需要在舊屬性下面指定最新的屬性。這是因爲display-property不是前綴。

要添加項目的寬度：

.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+ */ 
} 

我們需要做的最後一件事是改變項目的順序，因爲現在的main-nav是main-content

.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; 
}