有关flexbox模块的最新教程吗?

时间:2012-05-26 12:15:33

标签: css css3 flexbox

我知道Flexible Box Layout module规范发生了变化,一些浏览器现在实现了多个版本(使用不同的语法)。我一直在寻找信息,但我只能找到有关警告他们现在已经过时的教程。

我知道规范可能会再次发生变化,但我有一个不寻常的用例(Chrome扩展程序),我想以当前的形式使用它。我只是想知道如何使用Chrome中实现的最新版本。

有谁知道最新的教程?

4 个答案:

答案 0 :(得分:7)

这是迄今为止我发现的最好的flexbox tutorial,它已得到很好的解释,或者如果您需要更深入的解释,请查看w3c draft

要测试并更好地了解flexbox模型,请查看此flexbox playground

答案 1 :(得分:1)

Flexbox模块尚未过时。新模型的实施需要一段时间,可能需要一年时间才能实施。

W3C始终拥有标准文档以及可能未实现的事项说明。

这是当前的Flexbox Layout Module

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

答案 2 :(得分:1)

因为过去实现已经改变,所以知道了两个主要的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分为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 - 属性没有前缀。

添加项目的宽度:

.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 :(得分:0)

html5please.com提供,听起来Flexbox规范被认为是稳定的,OperaMozilla有教程。

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