首页风格
门户
博客

使用Flexbox布局方式的简单演示

日期:2013-4-4  来源:GBin1.com

众所周知,CSS有多重布局模型的操作,可以使页面按照不同的布局进行展现。Flexble box是另一种布局模型,简称为Flexbox。它如今经过重写,使得在编码和使用上得到非常有效的简化。

关于Flexbox的介绍请关于文章: CSS的未来 - 游戏的改革者FLEXBOX

Flexbox布局的简单演示

Flexible box布局模型

Flexbox中有两个轴,一个主轴和一个横轴。主轴是主要的轴,横轴是垂直于主轴的。每一个轴都有它相关联的维度和起点/终点。不论是在容器中还是容器本身都有一定的高度和宽度。

Flexbox布局的简单演示

浏览器支持

目只有一部分浏览器支持Flexbox,而对于支持Flexbox的浏览器而言,也不是所有版本都可以达到最新Flexbox的语义。

浏览器对Flexbox的支持情况如下所示:

  • Opera(12.1) - 支持当前最新Flexbox,不需要任何前缀标识。
  • Chrome(23.0) - 支持当前最新Flexbox,需要添加前缀标识:-webkit
  • Safari(5.1) - 支持旧版本的Flexbox,需要添加前缀标识:-webkit
  • IE(10) - 支持旧版本的Flexbox,需要添加前缀标识:-ms.IE9及以下版本不支持Flexbox。
  • Firefox(16) - 支持旧版本的Flexbox,需要添加前缀标识:-moz.版本20.0开始支持新版本的Flexbox,并且不需要添加前缀标识。

移动通讯设备对Flexbox的支持情况如下所示:

  • iOS和安卓支持旧版本的Flexbox,需要前缀标识: -webkit。
  • Blackberry(v10)支持最新语义,需要前缀标识: -webkit。
  • Opera mini不支持。

Flexbox的创建非常简单,在html页面中定义一个class=flex-contanier的div,然后创建flexbox的代码如下:

.flex-container {
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+ */
}

Flexbox可以很轻易的改变HTML页面中内容的顺序,利用flexbox的order属性,代码如下:

.header {
-webkit-order: 1;
order: 1; }

.content {
-webkit-order: 2;
order: 2; }

.primary {
-webkit-order: 3;
order: 3; }

.secondary {
-webkit-order: 4;
order: 4; }

.footer {
-webkit-order: 5;
order: 5; }

上面的代码中,表明了header的顺序为1,footer的顺序为5,在页面中将按照这个顺序排列显示。但是如果你想要让你的footer显示在页面的最上方,那么你可以将它的order改为1,从而非常方便的改变了页面元素的位置。

077d21f6-b413-4d03-8073-d0346fd8d865

如上面的例子所示,你可以尝试改变内容的顺序,然后再结果中看到效果。

但是记住,目前完全支持Flexbox的浏览器只有Chrome和Opera,以上代码请在Chroma或者Opera浏览器上测试。

其他关于Flexbox的Demo我们将会在之后推出,请大家继续关注。

via 极客标签

来源:使用Flexbox布局方式的简单演示

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. 市场分析报告

    此评论在等待批准中

    2013-4-10 上午11:44
今日推荐