flex布局神奇的小诀窍

背景

还是神奇的产品经理,想要自适应而且还要求里面的内容宽高不能变，一个管理后台要那么花里胡哨干嘛呢？

分析

小盒子宽高固定在大盒子里，然后自适应的按照顺序排放，屏幕宽度变化一行展示的盒子个数变化。

类似这种 实际按照flex布局justify-content: space-between;出来的是这样的。

解决

实际上解决起来也是很简单的，只要能想到好的方式，真的非常非常的简单，只要在最下面一行加一些没有高度的空盒子就OK了。

代码

<template>
  <div class="flex-box">
    <div v-for="(item,index) in arr" :key = 'index' class="item">
    </div>
    <div v-for="(item,index) in arr1" :key = 'index' class="empty-item">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        1,2,3,4,5,6,7,8,9,10,11
      ],
      arr1:[
        1,1,1,1,1,1
      ]
    };
  },
  methods: {
  },
};
</script>

<style>
.count {
  color: red;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
}
  .item {
    width: 320px;
    height: 180px;
    border: 1px solid #999;
    margin-bottom: 20px;
    background-color: #f34c58;
  }
  .empty-item {
    width:320px;
    height: 0;
  }
</style>
      

结论

工作中天天写业务，一些基础的东西太容易忘掉了，比如一些CSS、或者是原生JS，这个时候我们还是需要多去练习和研究的。编码就像是练功一样，业务是招式，基础才是内功，只有内功扎实了，才能更好的发挥出招式来。最后祝大家多多的摸鱼，狠狠的收获。

完