熟练使用多行多列布局

项目中经常会用到多行多列布局，我们首先想到的就是结合flex布局，对于多行多列的布局要做到能到熟记于心，切记数量较少时写样式align-content: flex-start，并且考虑当数量过多时显示滚动条，每个小盒子内的样式设置，这样可以大大提高开发效率。

 <div class="container">
    <div class="box" v-if="isShow">
      <div class="content">
        <div
          v-for="item in list"
          :key="item.id"
          :class="['eachStyle']"
        >
          <div>神奇宝贝#:{{ item.name}}</div>
          <img src="xx.png" alt="" />
          <div>数量：{{ item.totalCount }}</div>
        </div>
      </div>
      <div class="bottomIcons">
         <div v-for="(item, index) in icons" :key="index">
          	<span class="commonStyle" :style="{background:item.value}"></span>&ensp;{{item.label}}
         </div>
      </div>
    </div>
    <div v-else class="noData">暂无数据</div>
  </div>

export default {
  name: "list",
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    isShow() {
      if (this.list?.length > 0) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    for (var i = 0; i < 10; i++) {
      this.list.push({
        id: i,
        name: `${i}号`,
        online: Math.random() >= 0.5,
        totalCount: parseInt(Math.random() * 28),
      });
    }
  },
  data() {
    return {
      icons: [
        {
          label: "0-5",
          value: "#1fcc85",
        },
        {
          label: "6-15",
          value: "#c3a500",
        },
        {
          label: "16-30",
          value: "#e64600",
        },
        {
          label: "大于30",
          value: "#8f8f8f",
        },
      ],
    };
  },
  methods: {
    
  },
};

@import "~@/assets/styles/mixin.scss";
.container {
  height: 100%;
  font-size: 14px;
  padding: 20px;
  box-sizing: border-box;
  .box {
    height: 100%;
    .content {
      width: 100%;
      height: 98%;
      overflow: auto;
      display: flex;
      justify-content: space-between;
      /*多条轴时向上对齐*/
      align-content: flex-start;
      flex-wrap: wrap;
      /*超出部分显示滚动条*/
      @include scrollStyle;
      .eachStyle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        /*根据情况设置每行的个数*/
        width: 45%;
        height: 130px;
        border: 1px dashed #ccc;
        margin-top: 10px;
        img {
          width: 60px;
          height: 68px;
        }
        /*根据情况设置某列的margin-right为0,其余的为正常值*/
        &:not(:nth-child(2n)) {
          margin-right: 10px;
        }  
      }
    }
    .bottomIcons {
      width: 100%;
      height: 2%;
      display: flex;
      /*文字与数字要以基线对齐*/
      align-items: baseline;
      justify-content: flex-end;
      margin-top: 1%;
      .commonStyle {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-left: 10px;
      }
    }
  }
  .noData {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
    height: 100%;
  }
}

• 加v号zyl751023293，第一时间在浏览文章中出现不明白之处，进行交流，共同进步！！！
• 如果这篇文章对你有用，记得留个脚印再走哟~