本文介绍如何使用CSS弹性布局创建一个始终保持正方形的骰子。目标是利用CSS代码，生成一个类似于示例图片的骰子，并确保其显示区域始终为正方形。
我们采用以下HTML结构和CSS样式：
HTML结构：
@@##@@
div.dice作为容器，包含一个用于背景或阴影的图片img.shadow和一个无序列表ul.spots表示骰子点数。列表项li代表点数，class="active"表示显示的点数。
立即学习“前端免费学习笔记（深入）”；
CSS样式：
.dice {
max-width: 500px;
width: 100%;
border: 1px solid #000;
margin: auto;
position: relative;
border-radius: 10px;
overflow: hidden; /* 隐藏超出容器内容 */
img {
display: block;
width: 100%;
height: 100%; /* 保证图片填充容器 */
object-fit: cover; /* 图片缩放填充容器 */
}
.spots {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
li {
width: 30%;
height: 30%;
border-radius: 50%; /* 点为圆形 */
background-color: transparent; /* 默认透明 */
&.active {
background-color: skyblue;
}
}
}
}
box容器设置最大宽度、居中显示和圆角边框。spots使用弹性布局，flex-wrap: wrap允许元素换行，justify-content: space-between和align-content: space-between确保列表项均匀分布。每个列表项li设置宽度和高度，保持骰子正方形，&.active选择器设置选中点的样式。img元素使用object-fit: cover确保图片填充容器，作为背景。通过以上HTML和CSS，即可实现一个始终保持正方形的骰子效果。 点数的显示可以通过JavaScript动态控制li.active类来实现。
