用flex布局写骰子

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

原创

最新推荐文章于 2022-06-15 01:37:45 发布 · 2.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#筛子 #弹性盒子 #flex布局练习

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

骰子一共有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-items: center;
            flex-direction: column;
            margin: 20px;