CSS布局之使用Flex布局画骰子（4点）

/* 定义容器样式 */
.dice-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100px; /* 容器宽度 */
  height: 100px; /* 容器高度 */
  margin: 20px; /* 外边距 */
  border: 2px solid #000; /* 边框 */
  border-radius: 10px; /* 边框圆角 */
}
 
/* 定义骰子面样式 */
.dice-face {
  width: 50%; /* 宽度为容器宽度一半 */
  height: 50%; /* 高度为容器高度一半 */
  background-color: #f2f2f2; /* 背景颜色 */
  border-radius: 50%; /* 圆形面 */
}
 
/* 定义第一个骰子面的样式 */
.dice-face:nth-child(1) {
  transform: rotate(90deg); /* 旋转90度 */
}
 
/* 定义第二个骰子面的样式 */
.dice-face:nth-child(2) {
  transform: rotate(180deg); /* 旋转180度 */
}
 
/* 定义第三个骰子面的样式 */
.dice-face:nth-child(3) {
  transform: rotate(270deg); /* 旋转270度 */
}
 
/* 定义第四个骰子面的样式 */
.dice-face:nth-child(4) {
  position: absolute; /* 绝对定位 */
  top: 25%; /* 上边距为容器高度25% */
  left: 25%; /* 左边距为容器宽度25% */
}
 
/* HTML结构 */
<div class="dice-container">
  <div class="dice-face"></div>
  <div class="dice-face"></div>
  <div class="dice-face"></div>
  <div class="dice-face"></div>
</div>

这段代码展示了如何使用CSS Flexbox布局来创建一个简单的4点骰子图案。每个.dice-face代表一个骰子面，通过transform属性进行旋转，第四个面通过绝对定位放置在容器的中心。这个例子简单直观，适合用于教学目的。