-webkit-flex demo

DIV 1
-webkit-flex:1;

DIV 2

-webkit-flex:2;

DIV 3
-webkit-flex:3;

DIV 4
-webkit-flex:4;

DIV 5
-webkit-flex:5;

节点flexbox是属性display:-webkit-flex;即将此元素盒模型定义为可伸缩盒模型;

给子元素使用flex伸缩属性，并分别赋值1、2、3、4、5，那么空间就会按照1/15、2/15、3/15、4/15、5/15分割给这五个子元素

DIV 6
-webkit-flex:1;

DIV 7

width:50%;

DIV 8
-webkit-flex:2;

给子元素7定义了width，子元素6和8定义了flex伸缩属性，那么留白空间就会按照1/3、2/3分割给6、8这两个子元素