使用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>