雙飛翼佈局，左右兩邊，中間自適應拉伸。

父盒子

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（頂部導航條根據內容自動撐開） 。