首页风格
门户
博客

Flexbox布局的简单演示之二

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

Flexbox布局的简单演示系列二

之前我们介绍了Flexbox的介绍,并且给出了一个Flexbox的简单例子,告诉大家如何创建Flexbox并且简单的利用Flexbox来操控页面内元素的顺序。在今天的文章中,我们继续介绍Flexbox的一些其它的属性。

除了排序之外,Flexbox还可以非常简单明了的定位页面元素的方向。Flex的项目现在可以一个接一个的顺序竖着排列是用了flex-direction属性。这个属性可以设置主轴的方向。这个属性的赋值可以有四个:

  • row(默认的)   :页面元素从左往右排列
  • row-reverse       :页面元素从右往左排列
  • column              : 页面元素从上向下排列
  • column-reverse : 页面元素从下向上排列

同flex-direction类似的属性还有flex-wrap。这个是用来设置容器是一个单行的flexbox还是多行的。它有以下三个赋值:

  • nowrap
  • wrap
  • wrap-reverse

这两个属性可以使用flex-flow来设置,当使用flex-flow时,前面一个参数是flex-direction,后面参数是flex-wrap。例如:

.flex-container {
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

order属性是用来定义元素顺序,如上一篇示例所示。

使 用默认的设置,所有的div都是在一个单列中。这对于一些应用是可行的,但是有时我们希望可以有多个column来显示,或者希望column可以随着屏 幕大小而改变。假设我们希望当屏幕大小超过10em时,content和primary边框栏可以并列显示两行。这样的话,我们可以使用一下代码: 

@media screen and (min-width: 10em) {
.content {
width: 67%;
-webkit-order: 3;
}
.primary {
width: 33%;
-webkit-order: 2;
}
}

这个改变非常简单,我们只需要调整每一个div的宽度,然后改变一下primary和content的顺序。

857089ee-1b0c-495a-a437-6b5c0aa36ed2

 我们在做一些修改,将上段代码改为以下代码:

@media screen and (min-width: 30em) {
.content {
width: 50%;
-webkit-order: 2;
order: 2;
}
.primary {
-webkit-order: 4;
order: 4;
}
.secondary {
-webkit-order: 3;
order: 3;
}
.sidebar {
width: 25%;
}
}

这个示例中,即当主屏幕的大小高于60cm时,content,primary和secondary会并列排在一行。并且content的大小是50%,而两个sidebar的大小分别是25%。 

f27c5071-e7d1-4841-99ec-b2b0529a62ec

 这个示例,你可以在Chrome或者Opera浏览器是体验一下。

via 极客标签

来源:Flexbox布局的简单演示之二

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

?ü?à

留言

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


  1. 嘻嘻

    此评论在等待批准中

    2013-4-25 下午12:17
今日推荐