如何用CSS弹性布局实现一个始终保持正方形的骰子界面？-css教程-PHP中文网

如何用CSS弹性布局实现一个始终保持正方形的骰子界面？

霞舞

发布： 2025-03-01 23:24:01

原创

1017人浏览过

如何用css弹性布局实现一个始终保持正方形的骰子界面？

本文演示如何使用CSS弹性布局(Flexbox)创建一个始终保持正方形的骰子界面。图片展示了一个骰子，其点数以圆点或方块表示，我们将通过代码实现类似效果，并确保骰子在不同容器大小下都能保持正方形。

核心在于巧妙运用flex-wrap、justify-content、align-content以及子元素的宽高比例。我们使用一个容器div，包含一个用于显示阴影的图片（可为透明图片）和一个无序列表ul，列表项li代表骰子上的点数。

以下为HTML结构和CSS样式：

<div class="box">
  @@##@@</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%; 将点数设置为圆形。