本文介绍如何使用CSS弹性盒模型（Flexbox）创建始终保持正方形比例的骰子效果。 示例图片展示了一个由多个小方块组成的骰子。我们将通过代码实现类似效果，并确保无论容器大小如何变化，骰子都能保持正方形。
实现的关键在于灵活运用flex-wrap、justify-content、align-content以及子元素的width和height属性。 以下为详细代码实现：
HTML结构:
@@##@@
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%;
}
.spots {
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
li {
width: 30%;
height: 30%;
border-radius: 50%; /* 将小方块改为圆形 */
background-color: skyblue; /* 默认颜色 */
&.active {
background-color: skyblue; /* 突出显示 */
}
}
}
}
代码首先使用一个div作为骰子容器，包含一个img元素（作为骰子阴影）和一个ul元素，ul元素内的li元素代表骰子上的小方块。 .spots 使用弹性布局，flex-wrap: wrap 允许元素换行，justify-content: space-around 和 align-content: space-around 保证小方块在容器内均匀分布，并保持间距。 每个li元素的width和height都设置为30%，确保正方形比例。 通过调整li元素的width和height值，可以改变小方块大小和整体比例。 overflow: hidden 用于隐藏可能超出骰子边界的元素。
通过以上HTML和CSS，即可创建一个始终保持正方形的骰子，并可通过修改CSS样式轻松调整骰子尺寸和外观。 本例中，小方块被修改为圆形，更符合骰子的视觉效果。
