利用CSS弹性布局构建自适应正方形骰子界面
本文介绍如何使用CSS弹性布局(Flexbox)创建始终保持正方形的骰子界面，效果图如上所示。 我们将通过HTML结构和CSS样式实现类似的视觉效果。
关键在于巧妙地结合Flexbox布局和比例控制。以下代码示例展示了如何构建这个骰子：
HTML结构：
立即学习“前端免费学习笔记（深入）”；
<div class="dice">
<img class="dice-shadow" src="data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==" alt="骰子阴影">
<ul class="dice-spots">
<li class="spot active"></li>
<li class="spot"></li>
<li class="spot"></li>
<li class="spot"></li>
<li class="spot active"></li>
<li class="spot"></li>
<li class="spot"></li>
<li class="spot"></li>
<li class="spot active"></li>
</ul>
</div>
这段HTML使用一个div作为容器，包含一个阴影图片(img)和一个无序列表(ul)来表示骰子点。li元素代表每个点，active类用于高亮显示。
对应的CSS样式：
.dice {
max-width: 500px;
width: 100%;
border: 1px solid #000;
margin: auto;
position: relative;
border-radius: 10px;
aspect-ratio: 1 / 1; /* 保持正方形 */
overflow: hidden; /* 隐藏超出部分 */
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 图片填充容器 */
}
.dice-spots {
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
padding: 10%; /* 调整点与边框的距离 */
box-sizing: border-box; /* 包含内边距 */
.spot {
width: 25%;
height: 25%;
background-color: skyblue;
border-radius: 50%; /* 圆形点 */
}
.spot.active {
background-color: darkblue; /* 改变选中点的颜色 */
}
}
}
这段CSS利用aspect-ratio: 1 / 1;属性确保容器始终保持正方形。Flexbox布局使点均匀分布。width和height设置为百分比，保证响应式布局。border-radius创建圆角骰子。背景图片作为底图，位于点元素下方。 通过绝对定位和百分比大小，保证骰子在不同尺寸下都能保持正方形。
通过以上HTML和CSS，即可创建一个响应式正方形骰子界面。 注意，padding和box-sizing的配合使用，保证了骰子点与边框的距离在不同屏幕尺寸下保持一致。
