flex-direction干嘛的？
决定子元素的排列方向.flex-direction: column;就是说子元素按列排布（竖向排布）
至于flex:1 0 100px;这三个参数的意思。。由于100+200+300=600>300px所以第一个参数是没用的。随便你写啥数字都行。
第二个参数是0，说明超出的部分也不会被压缩。
当然这里由于是lex-direction: column。第三个参数实际表示的是高度。
<style>
#flex{
flex-direction: column;
display:-webkit-flex;display:flex;width:400px;border:1px green solid;margin:0;padding:0;list-style:none;}
#flex li:nth-child(1){flex:1 0 100px;background:#888;}
#flex li:nth-child(2){flex:2 0 200px;background:#ccc;}
#flex li:nth-child(3){flex:3 0 300px;background:#aaa;}
</style>
</head>
<body>
<ul id="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
结果
image.png
如果没有flex-direction：column结果是
可以看到超出了父容器（箭头所指位置）
image.png
总结
还是很简单的嘛！
