FlexBox 是非常杰出的, 同时也是未来的布局方式之一. 在过去的几年里, flexbox 的语法有所变动, 故有 "新","旧" 两种语法, 但是我们通过将新, 旧语法以及过渡语法编写在一起, 可以得到较全面的浏览器支持. 下文来实现一个简单和常见的例子: 控制顺序的栅格.
html 部分:
语言化的标签所包裹的三个区域作为 flexbox 的内容, 每个区域按其所代表的语义放入 flexbox 的各列.
html 代码
- <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>
运行结果如下:
Flexbox 内容部分:
我们需要先写一个声明为 flexbox 的容器来显示各列内容. 只需要这样做, 所有在这个容器内的所有直接子元素都会变成可伸缩的元素, 不用在意这些元素之前是什么, 现在它们都成为可伸缩的元素了.
CSS:
css 代码
- .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+ */
- }
控制各列的宽度:
我们想实现一个 20%-60%-20% 的栅格.
第一步先把主要内容区 main 设为 60% 的宽.
第二步用 nav 和 aside 来平分剩余的 40% 区域.
最后需要加入新, 旧和过渡性的语法.
CSS:
css 代码
- .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+ */
- }
在最新的语法中, 宽度设置不是必须的, 浏览器会自动将剩余的 40% 的区域平分成两个 20%, 但是不设置宽可能会导致支持旧语法的浏览器的宽度塌陷.
重新定义各列的顺序:
对比之前的代码, 我们想要 main 区域的内容显示在中间. 这个通过 flexbox 很容易实现, 当然也要兼容新, 旧和过渡语法.
CSS:
css 代码
- .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;
- }
浏览器兼容:
如果你按照上面的写法, 可以实现下列浏览器的兼容:
[quote]
[ul]
[li]Chrome 全版本 [/li]
[li]Firefox 全版本 [/li]
[li]Safari 全版本 [/li]
[li]Opera 版本 12.1+[/li]
[li]IE 版本 10+[/li]
[li]IOS 全版本 [/li]
[li]Android 全版本 [/li]
[/ul]
[/quote]
最大的限制性因素就是 IE 了, 除此之外都能很好的实现. 如果你是做手机端开发的, 就可以完全实现这个效果了, 如果有人在 Windows Phone 上测试过这段代码, 请告诉我结果.
Firefox 19 - 版本有一个小问题需要注意下. 例如, 在这个例子中, 我没能使侧边栏的宽真的占 20%, 任意字节的文本都会在内容区内部崩溃, 需要给 main 区域设置 -moz-box-flex:1;, 否知它就会像添加了 white-space:nowrap; 的效果一样, 会覆盖宽度, 拉伸到全宽, 这一点让我感到困惑.
- Demo
- CodePen http://codepen.io/chriscoyier/pen/zlntC
来源: http://www.qdfuns.com/article/30682/d6f543f2892b7f3cf14da2a657860b8d.html