布局根据浏览器大小自适应

最近在写前端页面，然后要写一个布局自适应，先贴效果图，我处理的不是很好，见谅。

大致的效果就是这样的。

我前端新手小白，记录一下这种布局方法。

善用@media 查询

详情地址：https://www.runoob.com/cssref/css3-pr-mediaquery.html

然后我就直接贴代码了
我这个是vue的，然后HTML的写法差不多

<template>
  <div class="parent">
      <div class="children" v-for="i in 12" :key="i">
          <div class="children-content"></div>
      </div>
  </div>
</template>

<script>
</script>

<style>
.parent {
    width: calc(100% + 24px);
    margin-left: -24px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #797979;
}

.children {
    flex-basis: calc(20% - 24px);
    height: 40px;
    margin-bottom: 24px;
    margin-left: 24px;
    background-color: aquamarine;
}

@media screen and (max-width: 1280px) {
    .children {
      flex-basis: calc(25% - 24px);
    }
}

@media screen and (max-width: 680px) {
    .children {
      flex-basis: 147px;
    }
    .parent {
    width: 680px;
    margin-left: -24px;
    display: flex;
    border: 1px solid #797979;
  }
}
</style>

@media screen and (max-width: 1280px)
当宽度小于1280px，就把children 的宽度每份占25%
@media screen and (max-width: 680px)
当宽度小于680px，就把children 的宽度定死，如果继续缩小，children 里面的内容可能会乱，然后把parent 的布局方式改改就行了。