【H2O2|全栈】关于CSS（12）用flex布局实现骰子的六个面

时间：2024-10-14 07:43:04

目录

CSS3入门

前言

准备工作

案例 

第一面

第二面

第三面

第四面

第五面

第六面 

预告和回顾

后话

CSS3入门

前言

在学习过flex布局的相关知识之后，我们调节成员在容器中的常规位置，比如居左、居中等，就方便很多了。

比较典型的例子就是骰子六个面的点的位置调节。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

案例 

首先，我们来看一下六个面实现的效果：

公用的样式如下：

body {
    min-width: 1500px;
}

/* 最外侧容器 */
.container {
    width: 1400px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background: #444444;
}

/* 骰面 */
.box {
    width: 120px;
    height: 120px;
    margin: 50px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    background: #fff;
}

/* 辅助定位盒子 */
.wrap {
    width: 100%;
    display: flex;
}

/* 辅助定位盒子调节属性 */
.whf {
    width: 50%;
}

.hhf {
    height: 50%;
}

/* 点 */
.point {
    width: 26px;
    height: 26px;
    margin: 7px;
    border-radius: 50%;
    background: #000;
}

下面按照顺序讲解各个面：

第一面

第一个面只有一个点，但是要注意这个点的大小、颜色比较特殊。

样式上，只需要让唯一的点在主轴和交叉轴方向都居中即可。

html代码如下：

<div class="container">
        <!-- 1 -->
        <div class="box">
            <div class="point"></div>
        </div>
</div>

CSS样式如下：

.box:first-child {
    justify-content: center;
    align-items: center;
}

.box:first-child .point {
    width: 52px;
    height: 52px;
    background: #990000;
}

至于这里为什么用了 .box:first-child，则是因为接下来我的每个骰面都要直接加在上一个骰面之后，直接在上面的container中添加即可。

第二面

第二面想要实现案例里的效果，其实没有看上去那么简单。

除了点的大小、颜色不同，点的相对骰面边界的边距还有细微变化——往中心稍微收了一些。

这个时候就需要使用到两个辅助定位盒子了，两个辅助定位盒子的高和宽都设置为骰面尺寸的50%，调节两个辅助盒子的位置在对角线上，然后让点在辅助盒子中居中即可。

html代码如下：

<!-- 2 -->
<div class="box">
    <div class="wrap whf hhf">
        <div class="point"></div>
    </div>
    <div class="wrap whf hhf">
        <div class="point"></div>
    </div>
</div>

CSS代码如下：

.box:nth-of-type(2) .wrap {
    justify-content: center;
    align-items: center;
}

.box:nth-of-type(2) .point {
    width: 36px;
    height: 36px;
    background: #000099;
}

.box:nth-of-type(2) .wrap:last-child {
    align-self: flex-end;
}

第三面

第三面相对来说就很简单了，在此之后点的样式无需再调节。

只需要调节第二个和第三个点在交叉轴上的位置即可。

html代码如下：

<!-- 3 -->
<div class="box">
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
</div>

CSS代码如下：

.box:nth-of-type(3) .point:nth-of-type(2) {
    align-self: center;
}

.box:nth-of-type(3) .point:last-child {
    align-self: flex-end;
}

第四面

第四面和第二面类似，点也需要向中心收一点。

设置两个辅助盒子，高度分别为骰面的一半，每个盒子中两个点，让这两个点在辅助盒子中沿主轴均匀分布，沿交叉轴居中。

html代码如下：

<!-- 4 -->
<div class="box">
    <div class="wrap hhf">
        <div class="point"></div>
        <div class="point"></div>
    </div>
    <div class="wrap hhf">
        <div class="point"></div>
        <div class="point"></div>
    </div>
</div>

CSS代码如下：

.box:nth-of-type(4) {
    align-content: space-between;
}

.box:nth-of-type(4) .wrap {
    justify-content: space-evenly;
    align-items: center;
}

第五面

第五面需要三个辅助盒子，不需要额外设置尺寸（因为之前设置尺寸的时候，默认每个点占的水尺寸都是1/3）。

辅助盒子中的内容靠两侧分布，第二个盒子中的点居中。

html代码如下：

<!-- 5 -->
<div class="box">
    <div class="wrap">
        <div class="point"></div>
        <div class="point"></div>
    </div>
    <div class="wrap">
        <div class="point"></div>
    </div>
    <div class="wrap">
        <div class="point"></div>
        <div class="point"></div>
    </div>
</div>

CSS代码如下：

.box:nth-of-type(5) .wrap {
    justify-content: space-between;
}

.box:nth-of-type(5) .wrap:nth-of-type(2) {
    justify-content: center;
}

第六面 

第六个面也有一个向中间收拢的效果，用的是spacing-evenly。

还是需要设置三个辅助盒子。

html代码如下：

<!-- 6 -->
<div class="box">
    <div class="wrap">
        <div class="point"></div>
        <div class="point"></div>
    </div>
    <div class="wrap">
        <div class="point"></div>
        <div class="point"></div>
    </div>
    <div class="wrap">
        <div class="point"></div>
        <div class="point"></div>
    </div>
</div>

CSS代码如下：

.box:nth-of-type(6) .wrap {
    justify-content: space-evenly;
}

预告和回顾

对网页布局和制作感兴趣的朋友，可以看下面的CSS专栏，里面有很多讲解详尽的案例，当前为第九期：

专栏 | CSS入门http://t.****img.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——浓度骤降的【H2O2】

相关文章