利用弹性盒写骰子布局

好的，让我来为您解答。

首先，我们需要一个容器元素，可以是`<div>`标签，然后将其设置为弹性容器，使用`display: flex`属性。

接下来，我们需要将子元素设置为弹性项，使用`flex: 1`属性。这样每个子元素都会平均分配容器的宽度。

最后，我们可以使用伪元素来模拟点数，将其设置为`position: absolute`，并使用`transform`属性来旋转和定位它们。

下面是示例代码：

HTML代码：

<div class="dice">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS代码：

.dice {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #000;
  position: relative;
}

.dot {
  flex: 1;
  position: relative;
}

.dot::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dot:nth-child(odd)::before {
  display: none;
}

.dot:nth-child(1)::before,
.dot:nth-child(6)::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.dot:nth-child(2)::before,
.dot:nth-child(5)::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.dot:nth-child(3)::before,
.dot:nth-child(4)::before {
  transform: translate(-50%, -50%);
}

这样，我们就实现了一个基于弹性盒子布局的骰子效果。