我对flex弹性布局的认识

我对flex弹性布局的认识

这张图是从阮一峰大牛的网络日志里偷来的,因为我也是刚看完。

大牛链接地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html   

大牛这篇文章讲得真好,我自己也有一些我的理解,和大家分享一下。


首先是使用这种布局的利弊:

好处是,布局更加精简,直接用css的方式,你不用再引入bootstraop,使用栅格系统。虽然我很喜欢栅格,哈哈。

瑕疵就是,IE10及IE10以上才支持,所以目前主要应用在移动端上。


如果你们公司的需求是兼容IE10以上,那么我推荐你使用flex布局。


好了,接下来讲讲我对这张图的理解。

里面讲了一些概念,容器,项目,主轴,交叉轴,主轴空间,交叉轴空间。。。我是属于脑子比较笨的,即使你说的再清楚,一时间这么多名词我还是记不住。

所以我的理解是:整个网页可以看做是一个大的容器,里面一堆div就是小的项目,他们排列的方式由你来决定,你想他们从左向右排列,还是,从右向左,从上到下,还是从下到上?由你来决定。


这里面需要注意两个东西:容器和项目。

举例,娜美怀孕了,10胞胎。

这个时候,娜美就是一个容器,10胞胎就是10个项目。

容器-----也就是此时的娜美,它去哪里,你来决定,上下左右,从哪开始?去看看他的6个属性就可以了。

项目-----也就是此时的孩子们,他们怎么排列,怎么站队,怎么睡觉?由你决定。去看看他的属性就可以了。

这个时候问题又来了,只有这两个么,如果我在项目里面还有东西要放呢?

那就相当于,娜美的孩子当了妈妈,也就是说,这个时候娜美的孩子就是容器了,它里面的就是新的项目了,继续使用属性。只是角色不一样了。


这里我只是讲一下我对容器和项目的理解,没有写实例,主要是因为属性真的不难,总共就那么几个,真的理解了意思才重要。