如何用CSS弹性布局制作一个始终保持正方形的骰子？-html教程-PHP中文网

如何用CSS弹性布局制作一个始终保持正方形的骰子？

碧海醫心

发布： 2025-03-03 08:04:18

原创

833人浏览过

如何用CSS弹性布局制作一个始终保持正方形的骰子？

利用css 弹性布局构建自适应正方形骰子

本文介绍如何使用CSS弹性盒模型（Flexbox）创建始终保持正方形比例的骰子效果。示例图片展示了一个由多个小方块组成的骰子。我们将通过代码实现类似效果，并确保无论容器大小如何变化，骰子都能保持正方形。

实现的关键在于灵活运用flex-wrap、justify-content、align-content以及子元素的width和height属性。以下为详细代码实现：

HTML结构:

<div class="dice">
  @@##@@
  <ul class="spots">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active"></li>
  </ul>
</div>

登录后复制

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样式轻松调整骰子尺寸和外观。本例中，小方块被修改为圆形，更符合骰子的视觉效果。

以上就是如何用CSS弹性布局制作一个始终保持正方形的骰子？的详细内容，更多请关注php中文网其它相关文章！