日期:2013-4-18 来源:GBin1.com
之前我们介绍了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 {
........
via 极客标签