我对flex弹性布局的认识

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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