Flexbox布局的简单演示之二
之前我们介绍了Flexbox的介绍,并且给出了一个Flexbox的简单例子,告诉大家如何创建Flexbox并且简单的利用Flexbox来操控页面内元素的顺序。在今天的文章中,我们继续介绍Flexbox的一些其它的属性。
除了排序之外,Flexbox还可以非常简单明了的定位页面元素的方向。Flex的项目现在可以一个接一个的顺序竖着排列是用了flex-direction属性。这个属性可以设置主轴的方向。这个属性的赋值可以有四个:
row(默认的)?? :页面元素从左往右排列row-reverse?????? :页面元素从右往左排列column????????????? : 页面元素从上向下排列column-reverse : 页面元素从下向上排列同flex-direction类似的属性还有flex-wrap。这个是用来设置容器是一个单行的flexbox还是多行的。它有以下三个赋值:
nowrapwrapwrap-reverse这两个属性可以使用flex-flow来设置,当使用flex-flow时,前面一个参数是flex-direction,后面参数是flex-wrap。例如:
.flex-container { ........
via 极客标签
来源:Flexbox布局的简单演示之二