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

最新推荐文章于 2024-10-25 13:24:23 发布

原创最新推荐文章于 2024-10-25 13:24:23 发布 · 670 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局 #搜索框等间距

前端杂事专栏收录该内容

205 篇文章

订阅专栏

本文介绍如何使用CSS Flex布局和margin属性解决搜索框提示的等间距问题，通过具体代码示例展示了如何实现每个item两侧间距相等的效果。

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

在这里插入图片描述