採用flex佈局實現home主頁的搜索左邊是圖片，右邊是文字

（1）先放代碼，即：

<template>
  <div>
    <div class="icons">
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" />
        </div>
        <p class="icon-desc">熱門景點</p>
      </div>
    </div>
    <div class="title-tuijian">
      熱銷推薦
    </div>
    <div>
      <ul>
        <li class="title-2">
          <img class="title-2-1" src="http://img1.qunarzz.com/sight/p0/1507/e8/2c6ac21e08d919610ee5e7b8b95be052.water.jpg_200x200_704f0dda.jpg" />
          <div class="title-2-2">
            <p class="title-2-2-1">小梅沙</p>
            <p class="title-2-2-2">浪漫大連首站</p>
            <button class="title-2-2-3">查看詳情</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  .icons
    overflow: hidden
    height: 0
    padding-bottom: 50%
    background: green
    .icon
      position: relative
      float: left
      overflow: hidden
      height: 0
      padding-bottom: 25%
      width: 25%
      border: .01rem solid #fff
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 1.4rem
        background: #00bcd4
        .img-content
          height: 100%
          display: block
          margin: 0 auto
      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: 1.4rem
        line-height: 1.4rem
        text-align: center
        color: #333
  .title-tuijian
    background: #eee
    line-height: 1.8rem
    text-indent: .5rem
    margin-top: .3rem
  .title-2
    display: flex
    height: 9rem
    .title-2-1
      height: 8.8rem
      width: 8.8rem
      padding: .1rem
    .title-2-2
      flex: 1
      padding: .1rem
      .title-2-2-1
        margin-top: 3.6rem
        line-height: 1.5rem
        font-size: .85rem
      .title-2-2-2
        line-height: 1.5rem
        color: #ccc
      .title-2-2-3
        background: #ff9300
        color: #ffffff
        border-radius: .3rem
        padding: 0 .2rem
</style>

我認爲flex是設置一段區域，而後flex=1的部分會自動使用剩下的全部空間。

（2）父元素title-2設置爲：

　　　　display: flex

　　　　height: 9rem

（3）同時，設置圖片的高度爲8.8rem，而後再用padding使用餘下的高度，即：

　　　　height: 8.8

　　　　rem width: 8.8

　　　　rem padding: .1rem

（4）而後將文字和按鈕用一個div包裹起來，而後它的flex爲1，讓它使用父元素剩下的空間；而後<p>和<button>是塊元素，因此會一行一行的顯示；

效果爲：