用css3的flex好久了，虽然用的没问题，但还是很纠结，其他属性大都明白，但是flex-grow、flex-shrink、flex-basis始终搞不清，最经搜集了大量的资料，总算是明白了。
网上大部分解释是
flex-grow 是扩展比率。
flex-shrink 是收缩比率。
flex-basis 伸缩基准值。
假设flex盒子父级宽度固定为800px；
Flex-grow、Flex-shrink、Flex-basis 是Flex属性的分写模式；如：
.box { flex: 4 3 100px; }
等于
.box { flex-grow: 4; flex-shrink: 3; flex-basis: 100px; }
看以下例子
<style type="text/css"> .flex-parent { width: 800px; } </style> <div class="flex-parent"> <div class="flex-son"></div> <div class="flex-son"></div> <div class="flex-son"></div> </div>
flex-parent 是父级，而且他的宽度是固定为800px，不会改变；开始设置子级flex属性；
<style type="text/css"> .flex-son:nth-child(1){ flex: 3 1 200px; } .flex-son:nth-child(2){ flex: 2 2 300px; } .flex-son:nth-child(3){ flex: 1 3 500px; } </style>
