搜索框下侧提示信息等间距布局效果，自动换行

UI

首先UI设计图长这样：

我们经常遇到的搜索框提示大都长这样，要怎么实现呢？

CSS

很自然的我们会用到flex布局，乍看上去以为是等间距justify-content:space-arround，但是实际操作起来往往会有问题。
如果使用了等间距，那么flex换行以后第二行如果是一个元素的话就会居中，那这样要怎么处理呢？

Solution

上一个办法行不通，那就只能另辟蹊径了。
我们注意到要求是每个item两侧的间距需要相等，那这样我们可以考虑使用margin来控制外边距。当然依旧是flex布局：

.ys-search-tips{
    padding: 8px 12px;
    .wrapper{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .item{
        padding: 5px 8px;
        margin: 5px 8px;
        background: rgba(0,0,0,.06);
        border-radius:3px;
        color: #333333;
        font-size: 4vw;
      }
    }
  }

相应的html模板

<template>
  <div class="ys-search-tips">
    <div class="wrapper">
      <a class="item" href="javascript:;" @click="search(item.productId)" v-for="(item,index) of data" v-bind:key="index">
        {{item.name}}
      </a>
    </div>
  </div>
</template>

Effect