CSS3弹性盒模型flexbox布局基础版

文章目录

最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案。另外本人还废寝忘食的翻译了国外的《CSS3弹性盒模型flexbox完整教程》和《CSS3弹性盒模型flexbox布局实例》,这么好的文章没有人来发现,实在是遗憾。

文章写作背景

查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始支持,需要添加-ms前缀。

至于IE10之前的就不考虑了。弹性布局适合于移动前端开发,在Androidios上也完美支持,所以搞移动的朋友非常有必要认识和使用了。这个属性很久就看到了。一直在考虑到兼容性问题,没有认真深入,后来又发现在现在现代浏览器中也会出现一些诡异的bug,所以又放弃了。

如果考虑到只处理移动方面的,那么兼容性就可以忽略了。

w3c上是这样子定义的:box-flex的值为元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

文章写作目的

Flexbox是一个相当优秀的属性,它可能会成为未来版面布局的一部分。它的语法在过去的几年里发生了很大的变化。但如果我们把旧的,新的和过渡的版本整合在一起,就可以实现更好的支持各种浏览器了。尤其适合简单的,也是最常见使用例子:控制网格。

语法变化的地方

如果你搜索关于Flexbox的相关内容,你会发现许多过时的信息,让我们来看看下面这几种情况:

  1. 第一种:display:box; 或者是一个属性box-*;那么你看到的是2009年以前的Flexbox。
  2. 第二种:display:flexbox,或者是一个函数flex(),那么你看到的是2011这个中间版本的Flexbox。
  3. 第三种:display:flex,或者其他flex-*的属性,那么你看到的是当前的规范(截止本文发表时间)。

过时的例子

  1. Flexie - a JavaScript polyfill for Flexbox, uses old 2009 syntax.
  2. This article by Richard 分享在 Smashing Magazine在2011过渡时间,但它更多的关注是2009以前的语法。
  3. Stephen Hay写了一系列关于Flexbox的文章,这篇文章介绍2009以前的语法,接着是另外一个2011的另外一篇,很不幸,一个月过后语法又更新了。

查看例子

  1. 旧的Flexbox语法例子
  2. 新的Flexbox语法例子

综合案例

最终的排版显示会是下面这样子的。

flexgrid

需要用到的CSS知识,display,box-flex,flex,box-ordinal-group,flex-order,order,这几个都是css3的关于弹性盒子的新属性。相关属性将在下一篇文章详细讲解,敬请留意。

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>

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+ */
 }
.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-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;
}

演示地址

浏览器支持

flexbox-order

更多关于flexbox

  1. CSS3弹性盒模型flexbox布局实例
  2. CSS3弹性盒模型flexbox完整版教程

参考内容

http://css.doyoe.com/

http://css-tricks.com/using-flexbox/

http://www.w3school.com.cn/cssref/pr_box-flex.asp

原创文章:CSS3弹性盒模型flexbox布局基础版 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/using-flexbox.html)
评论已关闭。