採用flex佈局實現home主頁的搜索框

（1）先放示例代碼，即：

 1 <template>
 2   <div class="header">
 3     <div class="header-left">
 4       <Icon type="chevron-left"></Icon>
 5     </div>
 6     <div class="header-input">
 7       <Icon type="search"></Icon>
 8       輸入城市/景點/遊玩主題
 9     </div>
10     <div class="header-right">
11       北京
12       <Icon type="arrow-down-b"></Icon>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18 export default {
19   name: 'HomeHeader'
20 }
21 </script>
22 
23 <style lang="stylus" scoped>
24   .header
25     display: flex
26     background: #00bcd4
27     width: 100%
28     height: 1.95rem
29     .header-left
30       width: 2rem
31       float: left
32       text-align: center
33       line-height: 1.95rem
34       font-size: 1.5rem
35     .header-right
36       float: right
37       width: 3rem
38       text-align: center
39       line-height: 1.95rem
40       font-size: .8rem
41     .header-input
42       flex: 1
43       background: #fff
44       height: 1.7rem
45       line-height: 1.7rem
46       font-size: .7rem
47       padding: 0 .6rem
48       border-radius: .5rem
49       margin: auto 0;
50 </style>

（2）首先，在父元素中採用flex佈局，而後左子元素採用向左浮動，右元素採用向右浮動，而中間元素設置flex爲1，即在左右元素寬度肯定的狀況下，剩下的寬度由中間部分佔領。

（3）當父元素的高度等於子元素的行高時，子元素會實現上下自動居中；（只試用只有一行的狀況下）

（4）採用margin: auto 0也能實現上下自動居中，但他是相對父元素的高度而言的。

（5）padding是相對本身移動的。而margin是相對別人移動的。

如下爲效果圖：