4、实现一个搜索框，使得input的宽度自适应、按钮宽度固定

场景：在写H5移动端的时候，常常会遇到再顶部有搜索框的情况，如下图： 

 

因为要适应不同的移动设备的屏幕宽度，若将所有的元素宽度写死，更换设备后无论是屏幕宽度增大还是缩小，样式一定会乱掉。因此可以将中间输入框的宽度设置为可变的，即可跟随屏

幕宽度的变化而变化，这样就解决适配的问题。

（1）方式一：使用grid布局。

input列 宽度自适应，button列 固定宽度（div可不加宽度，会被input撑开）

（2）方式二：使用flex布局

input设置width:100%；button设置固定宽度： 让Input填充剩余空间，而且不会让button换行

（3）方式三：利用flex-grow让input填充剩余空间

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。