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