Flexbox布局的简单演示之二

日期：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 极客标签

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