使用CSS弹性布局实现正方形骰子效果

下面我将展示如何使用CSS的Flexbox弹性布局来创建一个正方形骰子效果，包含骰子的点和布局。

HTML结构

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

CSS样式

.dice {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 2px solid black;
  border-radius: 10px;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.face {
  width: 80%;
  height: 80%;
  display: flex;
  /* 以下是可调整的属性，用于不同点数布局 */
  justify-content: center;
  align-items: center;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
}

不同点数骰子面的实现

1点

/* 使用上面的基本样式即可 */

2点

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

.face {
  flex-direction: column;
  justify-content: space-between;
}

.dot:last-child {
  align-self: flex-end;
}

3点

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

.face {
  flex-direction: column;
  justify-content: space-between;
}

.dot:nth-child(2) {
  align-self: center;
}

.dot:last-child {
  align-self: flex-end;
}

4点

<div class="face">
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.face {
  justify-content: space-between;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

5点

<div class="face">
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="center-dot">
    <div class="dot"></div>
  </div>
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.face {
  justify-content: space-between;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.center-dot {
  align-self: center;
}

6点

<div class="face">
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="column">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.face {
  justify-content: space-between;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

完整骰子实现

如果你想创建一个完整的3D骰子，可以使用CSS 3D变换，但这超出了纯Flexbox的范围。上面的实现展示了如何使用Flexbox创建2D骰子面。

Flexbox的优势在于可以轻松调整点的排列方式，只需修改justify-content和align-items属性即可实现不同的布局。