（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是相对别人移动的。
以下为效果图：
