使用flex布局写6种骰子🎲

效果图

概述说明

不使用position定位，完全靠flex进行分配位置。

在线查看

点击查看

完整代码

<template>
  <div class="content">
    <ul class="list">
      <li class="item" v-for="item in 6" :key="item">
        <aside class="line" v-for="itemJ in 3" :key="itemJ">
          <div class="dot" v-for="itemK in 2" :key="itemK"></div>
        </aside>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.content {
  .list {
    width: 700px;
    height: 480px;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: repeat(3, 1fr);
    .item {
      display: flex;
      $wh: 200px;
      width: $wh;
      height: $wh;
      border-radius: 10px;
      background-color: antiquewhite;
      box-shadow: 0px 7px 18px 0px rgba(0, 0, 0, 0.21);
      .line{
        // border:1px solid #f00;
      }
      // 第一个
      &:nth-child(1) {
        justify-content: center;
        align-items: center;
        .line {
          &:not(:first-child) {
            display: none;
          }
          .dot {
            &:not(:first-child) {
              display: none;
            }
          }
        }
      }
      // 第2个
      &:nth-child(2) {
        flex-wrap: wrap;
        .line {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          width: 100%;
          &:last-child {
            display: none;
          }
          &:nth-child(1) {
            .dot:nth-child(2) {
              opacity: 0;
            }
          }
          &:nth-child(2) {
            .dot:nth-child(1) {
              opacity: 0;
            }
          }
        }
      }
      // 第3个
      &:nth-child(3) {
        flex-wrap: wrap;
        .line {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          width: 100%;
          height: 33.3333%;
          
          &:nth-child(1) {
            align-items: flex-end;
            .dot:nth-child(2) {
              opacity: 0;
            }
          }
          &:nth-child(2) {
            justify-content: center;
            .dot:nth-child(1) {
              display: none;
            }
          }
          &:nth-child(3) {
            align-items: flex-start;
            .dot:nth-child(1) {
              opacity: 0;
            }
          }
        }
      }
      // 第4个
      &:nth-child(4) {
        flex-direction: column;
        justify-content: center;
        .line {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          width: 100%;
          height: 38%;
          &:nth-child(3) {
            display: none;
          }
        }
      }
      // 第5个
      &:nth-child(5) {
        flex-direction: column;
        justify-content: center;
        .line {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          width: 100%;
          height: 24%;
          &:nth-child(1) {
            align-items: flex-end;
          }
          &:nth-child(2) {
            justify-content: center;
            .dot:nth-child(1) {
              display: none;
            }
          }
          &:nth-child(3) {
            align-items: flex-start;
          }
        }
      }
      // 第6个
      &:nth-child(6) {
        flex-direction: column;
        justify-content: center;
        .line {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          width: 100%;
          height: 26%;
        }
      }
    }
    .dot {
      $wh: 30px;
      width: $wh;
      height: $wh;
      border-radius: 9999px;
      background-color: #000;
    }
  }
}
</style>