我知道Flexible Box Layout module规范发生了变化,一些浏览器现在实现了多个版本(使用不同的语法)。我一直在寻找信息,但我只能找到有关警告他们现在已经过时的教程。
我知道规范可能会再次发生变化,但我有一个不寻常的用例(Chrome扩展程序),我想以当前的形式使用它。我只是想知道如何使用Chrome中实现的最新版本。
有谁知道最新的教程?
答案 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规范被认为是稳定的,Opera和Mozilla有教程。
注意我不确定为什么html5please仍然建议避免。它的文字似乎表明相反。