本文演示如何使用CSS弹性布局(Flexbox)创建一个始终保持正方形的骰子界面。 图片展示了一个骰子，其点数以圆点或方块表示，我们将通过代码实现类似效果，并确保骰子在不同容器大小下都能保持正方形。
核心在于巧妙运用flex-wrap、justify-content、align-content以及子元素的宽高比例。 我们使用一个容器div，包含一个用于显示阴影的图片（可为透明图片）和一个无序列表ul，列表项li代表骰子上的点数。
以下为HTML结构和CSS样式：
<div class="box">
<img class="shadow_img" src="data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow==" alt="如何用CSS弹性布局实现一个始终保持正方形的骰子界面？" ></img>
<ul class="list-wrap">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li class="cur"></li>
</ul>
</div>
.box {
max-width: 500px;
width: 100%;
border: 1px solid #000;
margin: auto;
position: relative;
border-radius: 10px;
img {
display: block;
width: 100%;
}
.list-wrap {
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 {
border-radius: 50%; /* 圆点 */
width: 25%; /* 调整为25%使点数更分散 */
height: 25%; /* 调整为25%使点数更分散 */
margin: 2.5%; /* 增加间距 */
&.cur {
background-color: skyblue;
}
}
}
}
HTML代码中，我们用背景图片模拟骰子阴影，并用ul和li创建点数。 CSS中，.box设置容器样式，包括最大宽度、边框和圆角。 .list-wrap的display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; 确保列表项均匀分布，并保持骰子正方形。 每个li元素宽高设置为容器的25%，形成3x3网格，cur类突出显示点数。 通过调整li的width、height和margin属性，可控制点数大小和间距。 justify-content和align-content 使用space-around代替space-between，使点数分布更均匀美观。 border-radius: 50%; 将点数设置为圆形。
立即学习“前端免费学习笔记（深入）”；
通过以上HTML和CSS，即可实现一个始终保持正方形且响应式布局的骰子界面。
