有没有关于 flexbox 模块的最新教程？ [关闭]答案

【问题标题】：Any up-to-date tutorial for the flexbox module? [closed]有没有关于 flexbox 模块的最新教程？ [关闭]
【发布时间】：2012-06-01 17:27:10
【问题描述】：

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

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

有人知道最新的教程吗？

【问题讨论】：

如果您查看邮件列表甚至ED，您会注意到它正在经历巨大的变化。我认为此时您没有比更改规范本身更可靠的了...

标签： css flexbox

【解决方案1】：

这是迄今为止我找到的最好的flexbox tutorial，它的解释非常好，或者如果您需要更深入的解释，请查看w3c draft。

为了测试和更好地理解 flexbox 模型，请查看flexbox playground。

【讨论】：

【解决方案2】：

因为过去的实现发生了变化，所以已知 2 个主要的 flexbox 实现。 This page 提供了一些关于新旧实现的背景信息。

我找到了一个很好的关于 Flexbox 的当前实现状态的教程here。

页面HTML结构示例代码（demo on Codepen here）：

<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 分成三部分，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;
}

【讨论】：

【解决方案3】：

感谢html5please.com，听起来 Flexbox 规范被认为是稳定的，Opera 和 Mozilla 有教程。

请注意，我不确定为什么 html5please 仍然建议避免使用。它的文字似乎暗示了相反的意思。

【讨论】：

【解决方案4】：

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

W3C 始终拥有标准文档以及可能未实施或未实施的事项的注释。

这是当前的Flexbox Layout Module。

这是新规范的编辑草稿Flexbox Layout Module 2012。

【讨论】：