Flex布局 flex属性算法

<div class="parent">

<div class="item-1"></div>

<div class="item-2></div>

<div class="item-3"></div>

</div>

.parent {display: flex;width: 600px;}

.parent > div {height: 100px;}

.item-1 {width: 140px;flex: 2 1 0%;background: blue;}

.item-2 {width: 100px;flex: 2 1 auto;background: darkblue;}

.item-3 {flex: 1 1 200px;background: lightblue;}

总基准数 0%+auto+200=300  ( 0%:0   auto对应width:100）   即item1:0  item2:100  item3:200  

剩余大小600-300=300

放大系数：2+2+1=5 即item1:120  item2:120  item3:60

则 item1:120  item2:220 item3:260