制作自适应宽高工具列表

---

theme: vuepress

既然网站框架已经出来了，那么我就应该像生产队的驴不知疲倦的填充内容！

前面说到，我的大致规划就是将文章功能完成以后每次增加新内容时都可以写一篇文章出来，于是今天就增加了一下首页的工具列表。

预览图

在开始之前，先来看看效果：

整个展示出来的样子是有参考别的网站，但是在具体的实践过程中，有着自己独立的思考，不过我感觉似乎在一些方法上进入了误区。

正文

简单布局

看到这个图片其实一眼就可以看到是flex布局，这个没啥说的

item的边距

两边对齐

使用flex布局以后，首先要解决的问题就是让子元素可以换行，加上两端对齐:

.parent{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

这样就完成了最基本的效果:

边距问题

上面的代码，就把大致的框架写了出来，接下来开始完善一点点的小细节。 首先，我们想要实现预览图的中的每个item和每个item之间留有一定的间隙，那么我们要么使用外边距要么使用内边距，这里考虑到我们自适应的内容，所以使用了内边距，也就是说我们需要对内边距进行适当的修改。

我这里仅仅使用移动端一行三列和电脑端一行六列进行修改，这里大概分两部分：一部分是电脑端，一部分是移动端。我使用了tailwindcss，所以移动端更容易写出来： · 当索引为1、4、7...时（ （index+2） % 3 ==0 ）,设置右边距为8px：pr-2 · 当索引为2、5、8...时（ （index+1） % 3 ==0 ）,设置左右边距为4px：px-1 · 当索引为3、6、9...时（ （index） % 3 ==0 ）,设置左边距为8px：pl-2 这样，移动端的边距就出来了。

电脑端也是同样的道理，但需要注意的是要覆盖一下移动端设置的边距： · 当索引为1、7、13...时（ （index+5） % 6 ==0 ）,设置：md:pr-1 md:pl-0 · 当索引为6、12、18...时（ （index） % 6 ==0 ）,设置：md:pl-1 md:pr-0 · 当索引不为上面时,设置：md:px-1

这样，边距的问题就解决了。

等比例宽高问题

仔细看上面的两个图，可以看到item的宽高其实是有一定的比例的，但是我的宽度并不是固定的，而是自适应的，怎么办呢？简单百度了一下，发现使用padding可以解决。

原因：padding的百分比值无论是水平方向还是垂直方向均是根据宽度计算。

怎么解释呢？一般的图片的长宽比例为3比2，那么我们来设置一个div的css：

div {
    padding-bottom: 66%;
}

这个时候无论怎么样设置这个div的宽度，这个div的高度都是这个宽度的三分之二（div内暂时没有其他内容）。

那么如果div内有其他内容呢？

使用绝对布局即可！

我们设置div为相对布局，div内嵌套一个div，宽高设置为100%，设置为绝对布局，这个时候，我们就可以在子div里面为所欲为了。

源码

时间也不早了，没有办法整理一下代码发出来了将就看着吧：

<div class="w-full flex flex-wrap justify-between">
    <div v-for="item in 12" class="w-4/12 md:w-2/12 flex mb-4"
        :class="(item + 5) % 6 == 0 ? 'md:pr-1 md:pl-0' : '', (item) % 6 == 0 ? 'md:pl-1 md:pr-0' : '', ((item + 6) % 6 != 0)&&((item) % 6 != 0) ? 'md:px-1' : '', (item + 1) % 3 == 0 ? 'px-1' : '', (item + 2) % 3 == 0 ? 'pr-2' : '', (item) % 3 == 0 ? 'pl-2' : ''">
        <div class="w-full relative " style="padding-bottom: 92%;">
            <div class="tool-box absolute" style="height: 100%; width: 100%;">
                <div class="tool-icon"
                    style="background-image: url(图片地址);">
                </div>
                <p class="tool-title">英文转换</p>
                <p class="tool-des">智能视频剪辑一键提升跑量</p>
            </div>
        </div>
    </div>
</div>

@layer components {
  .tool-box {
    @apply bg-white rounded items-center flex flex-col;
  }

  .tool-icon {
    @apply w-12 h-12;
    margin-top: 18%;
  }
  .tool-title {
    @apply text-center custom-font-14 leading-6;
  }
  .tool-des {
    @apply hidden mt-2 p-2 text-center text-white custom-font-14 leading-6;
  }

  .tool-box:hover {
    @apply bg-blue-600 duration-200 shadow-2xl;
    transform: translateY(-6px);
  }

  .tool-box:hover .tool-icon {
    @apply hidden;
  }

  .tool-box:hover .tool-title {
    @apply text-white custom-font-16;
    margin-top: 20%;
  }

  .tool-box:hover .tool-des {
    @apply text-white custom-font-12 block;
  }
}

.custom-font-12 {
  font-size: 12px;
}

.custom-font-14 {
  font-size: 14px;
}

.custom-font-16 {
  font-size: 16px;
}

晚安玛卡巴卡！