5

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

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

有人知道最新的教程吗？

4

4 回答 4

7

这是迄今为止我发现的最好的flexbox 教程，它解释得很好，或者如果您需要更深入的解释，请查看w3c 草案。

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

于 2013-02-10T09:53:25.213 回答
1

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

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

这是当前的Flexbox 布局模块。

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

于 2012-06-04T16:04:50.663 回答
1

因为过去的实现发生了变化，所以我们知道 flexbox 的 2 个主要实现。这个页面提供了一些关于旧的和新的实现的背景信息。

我在这里找到了一个很好的关于 Flexbox 实施状态的教程。

页面 HTML 结构的示例代码（此处在 Codepen 上演示）：

<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-wrap3 部分，我们可以使用 flexbox。main-nav另一个优点是main-content元素在 DOM 中的位置在之前，main-nav但是使用 flexbox 我们可以在内容之前渲染它。这对于屏幕阅读器很有用，因此首先阅读内容。

我们需要创建page-wrap一个 flexbox 上下文。这样所有的孩子都变成了 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;
}
于 2013-05-02T14:15:56.580 回答
0

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

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

于 2012-10-24T21:00:41.073 回答