我对flex弹性布局的认识

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

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

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


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

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

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


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


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

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

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


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

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

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

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

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

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

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


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



评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值