使用弹性盒子模型的一些思考

  近来写h5的手机端页面，由于手机端需要根据不同手持设备的大小对网页有个自适应的过程，因此局部需要用到弹性盒子模型，整个页面的效果图如下所示：

中间靠下部分是两行两列，想法是用两个弹性盒子来实现，从原理上讲难度不大，外层的盒子设置为display: flex  然后里面那两个块都设置 flex-grow:1 即可。 代码如下：
HTML 结构： 
<div class="jksh-content"> 
 <div class="yytj"><span>预约体检</span></div>
 <div class="jkk"><span>健康卡</span></div>
</div>
<div class="jksh-content">
 <div class="zzzj"><span>咨询专家</span></div>
 <div class="jkzx"><span>健康咨询</span></div>
</div>
CSS样式：
.jksh-content{display: flex; justify-content:center; margin: 0 auto;}
.jksh-content div{flex-grow:1; height:100px; margin:8px;}
.yytj{background:#368ff5 url("img3/phone.png") no-repeat center 55%; }
.jkk{background:#fe864a url("img3/xinyongka.png") no-repeat center 55%;}
.jksh-content span{font-size:16px; color:#fff; margin-left:8px; line-height: 34px;}
.zzzj{background:#0fc4d9 url("img3/doctor.png") no-repeat center 55%;}
.jkzx{background:#9656f3 url("img3/news.png") no-repeat center 55%;}

效果很别扭，原因是上面两个块内部包含的文字长度不同 文字个数一致就如同下一行那么规整的效果了。等等 那这个伸缩盒缺点也太大了  难道为了我实现个效果 这个UI就非的字数一样，这就隔了一个字而已，那要是字数差异过大，这还不能用了。
经过一番尝试，根据阮大神的微博评论得到指点，引入了flex-basis这一属性，对需要设置flex-grow的元素都设置flex-basis为0 代码为：.jksh-content div{flex-grow:1; height:100px; margin:8px; flex-basis: 0;}
显示效果如下，得到完美解决。

经过一番尝试，其实这个属性设置后再进行空间分配就很标准了  不关其中的行内元素宽度，都有很好的分配空间，问题解决，希望对他人也有所启发。但这个具体原因不是很清楚，所以哪位大神看到了就请留言给我  看看这个具体的计算到底是什么原理 毕竟flex-basis属性不是0的情况下也能用。