用flex布局写骰子

最新推荐文章于 2022-06-15 01:37:45 发布

exploringfly

最新推荐文章于 2022-06-15 01:37:45 发布

阅读量2.9k

点赞数 3

文章标签：筛子弹性盒子 flex布局练习

本文链接：https://blog.youkuaiyun.com/exploringfly/article/details/79346536

版权

本文介绍了如何利用Flex布局来实现骰子的六面显示。从最简单的骰子为1的居中设置，到骰子为2、3、4、5、6时不同排列和样式调整，通过改变flex-direction和盒子里的点数分布，成功创建了各种骰子面的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

骰子一共有6个面，先构建6个div，写上样式：

.box1 {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;//盒子之间的间隙
            background-color: paleturquoise;
        }

骰子为1的最容易写，居中即可：

 <div class="box1">
        <div class="contain"></div>
 </div>

.contain {
            width: 20px;
            height: 20px;
            margin: 20px;
            border-radius: 50%;
            background-color: #000000;//小黑点
        }

骰子为2的时候，要考虑排列方式，增加flex-direction:column。

 .box2 {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-item

最低0.47元/天解锁文章