雙飛翼布局，左右兩邊，中間自適應拉伸。
父盒子
display: flex;
justify-content: space-between;
中間搜索框
width:100%
也可以直接父盒子給彈性盒，中間搜索框直接flex:1;即可完成布局
flex: 為三個屬性的縮寫 flex-grow, flex-shrink, flex-basis
flex-grow: 可拉伸 默認0
flex-shrink: 可壓縮 默認1
flex-basis: 當前元素的寬度 默認auto
flex:1 ---其實應寫成，
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0% (忽略自身寬度)
flex:auto ---其實應寫成，
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto（元素自身寬度）
flex:1 和flex:auto 的區別：
由於在這里只有一個元素，所以效果是一樣的。兩者的區別是
flex-basis屬性
如果是多個元素，則flex:1 代表剩余空間均分，即去除內外邊距、邊框，
但是忽略自身元素寬度等。
flex:auto 去除內外邊距、邊框，
但是要加上自身元素寬度。
總結：如果你要完全等分布局使用flex:1 ，如果你要根據內容寬度動態分配寬度則使用flex:auto（頂部導航條根據內容自動撐開） 。