用弹性盒完成移动端的搜索栏自适应，简述flex-grow和justify-content的使用方法

弹性盒中项目放大比例flex-grow: 1;和主轴方向两端对齐justify-content:space-between;的使用方法。

首先建立基本盒子结构如下：

<div class="box">
    <div class="box1">我是box1</div>
    <div class="box2">我是box2</div>
    <div class="box3">我是box3</div>
</div>

css样式如下：

    <style>
        .box{
            height: 300px;
            margin: 150px auto 0;
            border: 2px solid greenyellow;
            display:flex;
            justify-content: space-between;//（让子元素两端对齐）
        }
        .box1,.box3{
            width: 200px;
            height: 100px;
            background: pink;
        }
        .box2{
            background: skyblue;
            flex-grow: 1;//（屏幕的宽度减去box1和box3的宽度将其余的宽度全部给box2）
        }
        .box3{
            background: red;
        }
        
    </style>

注意点：
1、首先这种方法也适用于移动端搜索框的自适应，根据窗口的变化而变化。
2、父元素box不要给宽度，要自适应第一屏的宽度。
3、在弹性盒中子元素可以不给高度，会被拉伸以适应容器。