（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是相對別人移動的。
以下為效果圖：
