微信小程序flex-grow导致布局不对齐问题记录

今天开发小程序时遇到了一个诡异的问题 一度令我怀疑自己的代码，研究一两个小时终于解决了：

我在开发的时候喜欢用flex-grow 属性来当做权重使用，然而单独用这个属性测试发现内容会改变比例的同时另布局不对齐；

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

如果将 flex-basis定义为0；这样使用flex-grow时可以确保控件将完全按照比例进行空间的分配。内容超出也不会影响当前你定义的主轴控件长度。

所以解决此问题方案为 当列表中使用grow时，grow要和basis一起使用:

未使用basis

使用后