对flex理解不深刻引发的血案

　　以下两种写法所产生的效果是完全不同的：

　　写法1：

 1 .container {
 2   display:flex;
 3   flex-direction:column;
 4 }
 5 
 6 .header {
 7   flex: 2;
 8 }
 9 
10 .content {
11   flex: 32;
12 }
13 
14 .footer {
15   flex: 9;
16 }

　　写法2：

 1 .container {
 2   display:flex;
 3   flex-directino:column;
 4 }
 5 .header {
 6   flex-grow: 2;
 7 }
 8 
 9 .content {
10   flex-grow: 32;
11 }
12 
13 .footer {
14   flex-grow: 9;
15 }

　　写法1产生的效果就是高度比例为2:32:9，即将屏幕总共分成43份，第一个header部分占据2份，content部分占据32份，footer部分占据9份。

　　写法2则产生完全不同的效果，具体可参考http://www.heibaipig.com/blog/?p=450

　　最后，附上flex布局学习链接： http://www.runoob.com/w3cnote/flex-grammar.html

　　用彩色动画 GIF大图解释弹性盒工作机制: http://www.admin10000.com/document/12511.html

posted @ 2017-02-13 10:37  菜鸟村长  阅读(151)  评论(0)  编辑  收藏  举报