今天用flex布局画table，当设置表头间距的时候用到了flex-grow属性，全部设置成1后并没有出现距离等分的效果。
lex-grow重点在
lex-grow重点说明落在 剩余 这两个字上，父元素剩余的空间，那什么算父元素剩余空间呢，简单的理解就是(父元素的宽度-子元素总和的宽度)，这里有两种情况：
(1)子元素没有设置宽度：那么整个父元素的宽度就是剩余宽度，这个时候flex-grow可以正常的发挥作用，但是在这种情况下的效果是一个伪分配，因为子元素没有设置宽度，那么子元素的宽度是自适应的，flex-grow起到的作用更像是min-width的作用，一旦子元素a的内容超过这个分配的空间,那么就会重新计算剩余空间,剩余空间=(父元素的宽度-子元素a的宽度),这个剩余宽度就会交给剩下的子元素进行分配，如果剩下的又发生以上的情况，计算依旧。如果直接设置width:100%，那么当前的子元素宽度总和已经超过父元素宽度，那么此时此刻flex-grow就无效了，因为没有剩余空间了。于是在这个时刻，就按照(子元素/子元素宽度总和)超出部分*依次给每个子元素减少宽度，也就是设置100%的话就是等分宽度，设置其他宽度的话按照公式自行计算即可
(2)子元素设置了宽度:如果子元素有宽度，那么这个时候flex-grow的作用就是把剩余空间=(父元素宽度-子元素总和宽度)按照flex-grow的数值分配给每一个子元素，这个时候flex-grow的作用就像是实实在在的width一样，给子元素增加宽度,在这种情况下的得到的效果就是一个无法改变的分配好的宽度，即使你子元素a的内容超出了分配好的宽度，也不会影响宽度分配情况，你只能用overflow来更好地美观一下啊，而这个就是我们希望的到的分配效果。
解决办法：
给每一个子元素加上width:0。这样整个父元素的宽度就是剩余宽度，然后进行分配flex-grow，这个时候加上去的宽度就是实实在在的width。
