首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flexbox格局的简单演示之二

2013-05-02 
Flexbox布局的简单演示之二之前我们介绍了Flexbox的介绍,并且给出了一个Flexbox的简单例子,告诉大家如何创

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布局的简单演示之二

热点排行