flex布局会影响el-input宽度的原因

在了解为什么使用flex布局为什么会影响el-input宽度之前，首先要先了解flex-grow这个参数以及input的结构组成。

一、flex参数介绍

flex-shrink 

该属性用来设置子元素的 缩小比例，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink 的默认值为 1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为 0，表示不减小。

flex-grow

该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow 的默认值为 0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。

二、input结构组成

没有设置font-size   169px

font-size:12px;   146px

font-size:13   168px

font-size:14   170px

三、原因

当el-input不使用flex布局时，el-input默认input设置flex-grow为1，即会索取父元素的剩余空间，可能width值会变大。

当el-input添加了flex布局时， flex-grow 的默认值为 0，即不会索取父元素剩余的空间。

总结：flex布局会影响el-input大小的原因就是改变了flex-grow的值。