Css 有关于flexbox模块的最新教程吗？

我知道规范已经改变了，一些浏览器现在实现了它的多个版本（使用不同的语法）。我一直在搜索信息，但我只能找到带有警告的教程，这些教程现在已经过时了

我知道规范可能会再次更改，但我有一个不寻常的用例（Chrome扩展），我想以当前的形式使用它。我只是想知道如何使用Chrome的最新版本

---

有人知道最新的教程吗？

Flexbox模块还没有过时。新模式的实施需要时间，可能需要一年的时间

W3C总是有关于标准的文档，也有关于可能未实现或未实现的内容的注释

这是电流

这是新规范的编辑草稿。

由提供，听起来Flexbox规范被认为是稳定的，并且在和上有教程

注意：我不知道为什么html5please仍然建议避免使用。它的文本似乎暗示了相反的情况。

这是我迄今为止找到的最好的，解释得很好，或者如果您需要更深入的解释，请查看

---

为了测试和更好地理解flexbox模型，请勾选此项。

因为flexbox的实现在过去已经发生了变化，现在有两种主要的实现。提供有关旧实现和新实现的一些背景信息

我找到了一本关于Flexbox实现现状的好教程

页面（）的HTML结构示例代码：

属性的顺序很重要。因为有些浏览器支持这两种实现，所以我们需要在旧属性下面指定最新的属性。这是因为

display

-属性没有前缀

要添加项目的宽度，请执行以下操作：

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

---

如果你看邮件列表，甚至是电子邮件，你会注意到它正在经历巨大的变化。我认为在这一点上，没有什么比不断变化的规范本身更可靠的了。。。

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