经典flex骰子布局练习

如果皮卡会coding

已于 2022-03-26 11:08:45 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习 # HTML与CSS 文章标签：前端 css3

于 2022-03-25 23:09:17 首次发布

本文链接：https://blog.youkuaiyun.com/HYY_2000/article/details/123729998

前端学习同时被 2 个专栏收录

22 篇文章

订阅专栏

HTML与CSS

6 篇文章

订阅专栏

实现效果

(基于display:flex) 涉及的样式属性如下：主要是块级子元素的排列方式，对齐方式，方向以及单独元素的对齐。

模板HTML（可以自己练习）

下面的模板HTML中以div元素作为骰子的盒子，p标签作为骰子里面的点。同时给出了第一个骰子的样式，剩余的骰子的样式需要自己设定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>骰子布局</title>
    <style>
        body {
            margin: 10px 0 0 0;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        
        body>div {
            display: flex;
            width: 100px;
            height: 100px;
            border-radius: 4px;
            padding: 3px;
            margin: 2px;
            border: 2px solid red;
            box-sizing: border-box;
        }
        
        p {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
            margin: 2px;
        }
        
        .div1 {
            justify-content: center;
            align-items: center;
        }
        /*todo:请补全剩余骰子布局代码*/
    </style>
</head>

<body>
    <!--骰子1-->
    <div class="div1">
        <p></p>
    </div>
    <!--骰子2-->
    <div class="div2">
        <p></p>
        <p></p>
    </div>
    <!--骰子3-->
    <div class="div3">
        <p></p>
        <p></p>
        <p></p>
    </div>
    <!--骰子4-->
    <div class="div4">
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
    </div>
    <!--骰子5-->
    <div class="div5">
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
    </div>
    <!--骰子6-->
    <div class="div6">
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
    </div>
    <!--骰子7-->
    <div class="div7">
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>
    <!--骰子8-->
    <div class="div8">
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>
    <!--骰子9-->
    <div class="div9">
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>
</body>

</html>

实现过程

2号骰子

1. 通过黑点的排列方式，不难看出，子元素（两个黑点）是纵向排列column的。

2. 并且从竖直方向上看，子元素并不是聚集在中间center或者两端space-between，而是均匀的分布space-around。

3. p标签（即黑点）并没有在标签的最左侧或者右侧，而是在每个块的中间。

至此，我们的CSS样式就一目了然了。

.div2 {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

3号骰子

这里我们可以将三个顶点视作同一水平线，同时，第一个黑点起始于顶部，第三个黑点放置于尾部。

.div3 {
    justify-content: space-around;
    align-items: center;
}

.div3 p:nth-child(1) {
    align-self: flex-start;
}

.div3 p:nth-child(3) {
    align-self: flex-end;
}

4号骰子

四号骰子的布局有两种看法：我们可以理解上下两个黑点为一组，也可以理解左右两个黑点为一组。当然就有两种不同的布局：

/* 上下黑点为一组*/
.div4 {
    justify-content: space-around;
}

.div4 div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

/* 左右黑点为一组 */
.div4{
    flex-direction: column;
    justify-content: space-around;            
}
.div4 div{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

56789号骰子

一个个设骰子样式真的太麻烦了，难道没有一个简单的方法，一键通关吗？

我们观察剩余的骰子，可以发现他们的一个共同特点：即每一个骰子都有三行。

这代表着每一个骰子实际上 在竖直方向上排列了三个div盒子。那么我们可以写出他们共有的样式：

.div5,
.div6,
.div7,
.div8,
.div9 {
    flex-direction: column;
    justify-content: space-around;
}

继续观察不难得出，在每一个小div盒子中，黑点（不管是1个，2个，还是3个）均对齐中间切均匀分布。

.div5 div,
.div6 div,
.div7 div,
.div8 div,
.div9 div {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

此时查看我们得出的效果：

此时发现，8号骰子中间的黑点没有对齐两端，所以我们还需要单独设一个两端对齐的样式：

.div8 div{
    justify-content: space-between;
}

至此实现所有的骰子效果！源代码见下方codepen。

https://codepen.io/yyforreal/pen/WNdpvgRhttps://codepen.io/yyforreal/pen/WNdpvgR