flex布局小案例——制作骰子

导读:本篇文章讲解 flex布局小案例——制作骰子,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com


前言

看了这篇还不会制作骰子,欢迎来找我!
制作骰子首先需要学会flex的基础原理


提示:以下是本篇文章正文内容,下面案例可供参考

一、HTML的结构

步骤:

  1. 首先准备6个大盒子分别装点数1~6的圆点;
  2. 每个盒子里面分别使用span来装小圆点;
  3. 点数4和5的制作会比其他的要多一步;点数4大盒子里面需要左右两个盒子来分别装span,点数5大盒子里面需要左中右三个盒子来装span;
  4. 给span设置大小颜色圆角;
  5. 通过flex属性设置每个小圆点的位置;

结构代码如下:

<body>
    <section>
        <div class="box-1">
            <span></span>
        </div>
        <div class="box-2">
            <span></span>
            <span></span>
        </div>
        <div class="box-3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box-4">
            <div class="left">
                <span></span>
                <span></span>
            </div>
            <div class="right">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box-5">
            <div class="left">
                <span></span>
                <span></span>
            </div>
            <div class="center">
                <span></span>
            </div>
            <div class="right">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box-6">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </section>
</body>

二、制作步骤

骰子1

制作步骤图:
在这里插入图片描述

代码如下(示例):

		span {
            /* 设置每个骰子里面的小圆点 */
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50% 50%;
        }
        
        .box-1 {
            /* 给骰子设置主轴居中,侧轴居中对齐 */
            align-items: center;
            justify-content: center;
        }

骰子2

制作步骤图:
在这里插入图片描述

代码如下(示例):

 	.box-2 {
            /* 设置Y轴为主轴,侧轴居中对齐,主轴平均分配 */
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

骰子3

制作步骤图:

在这里插入图片描述

代码如下(示例):

		.box-3 {
            /* 设置Y轴为主轴,主轴平均分配 */
            flex-direction: column;
            justify-content: space-around;
        }
        
        .box-3 span:nth-of-type(2) {
            /* 第二个圆点侧轴居中对齐 */
            align-self: center;
        }
        
        .box-3 span:nth-of-type(3) {
            /* 第三个圆点侧轴从右往左排列 */
            align-self: flex-end;
        }

骰子4

制作步骤图:
在这里插入图片描述

代码如下(示例):

		/* 设置装圆点的盒子宽高为100% */
		.left,
        .right,
        .center {
            width: 100%;
            height: 100%;
        }
          /* 给4和5设置圆点大小颜色圆角 */
        .box-4 span,
        .box-5 span {
            display: block;
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50% 50%;
        }
        
        .box-4 .left,
        .box-4 .right {
            /* 设置Y轴为主轴,给父盒子添加flex属性,主轴平均分配空间,侧轴居中对齐 */
            flex-direction: column;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

骰子5

制作步骤图:
在这里插入图片描述

代码如下(示例):

		.box-5 .left,
        .box-5 .right {
            /* 设置Y轴为主轴,给父盒子添加flex属性,主轴平均分配空间,侧轴居中对齐 */
            flex-direction: column;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .box-5 .center {
            /* 给中间的小圆点设置主轴和侧轴居中对齐 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

骰子6

制作步骤图:
在这里插入图片描述

代码如下(示例):

.box-6 {
            /* 设置Y轴为主轴,强制换行,主轴平均分配,侧轴平均分配 */
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }

三、完整代码

效果图:

在这里插入图片描述

代码如下(示例):

    <style>
        body {
            background-color: #bbb;
        }
        
        section {
            width: 700px;
            margin: 100px auto;
        }
        
        section [class^="box"] {
            display: flex;
            float: left;
            width: 100px;
            height: 100px;
            margin: 0 5px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 20px;
        }
        
        span {
            /* 设置每个骰子里面的小圆点 */
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50% 50%;
        }
        
        .box-1 {
            /* 给骰子设置主轴居中,侧轴居中对齐 */
            align-items: center;
            justify-content: center;
        }
        
        .box-2 {
            /* 设置Y轴为主轴,侧轴居中对齐,主轴平均分配 */
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
        
        .box-3 {
            /* 设置Y轴为主轴,主轴平均分配 */
            flex-direction: column;
            justify-content: space-around;
        }
        
        .box-3 span:nth-of-type(2) {
            /* 第二个圆点侧轴居中对齐 */
            align-self: center;
        }
        
        .box-3 span:nth-of-type(3) {
            /* 第三个圆点侧轴从右往左排列 */
            align-self: flex-end;
        }
        /* 设置装圆点的盒子宽高为100% */
        
        .left,
        .right,
        .center {
            width: 100%;
            height: 100%;
        }
      
        
        .box-4 span,
        .box-5 span {
            display: block;
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50% 50%;
        }
        
        .box-4 .left,
        .box-4 .right {
            /* 设置Y轴为主轴,给父盒子添加flex属性,主轴平均分配空间,侧轴居中对齐 */
            flex-direction: column;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .box-5 .left,
        .box-5 .right {
            /* 设置Y轴为主轴,给父盒子添加flex属性,主轴平均分配空间,侧轴居中对齐 */
            flex-direction: column;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .box-5 .center {
            /* 给中间的小圆点设置主轴和侧轴居中对齐 */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .box-6 {
            /* 设置Y轴为主轴,强制换行,主轴平均分配,侧轴平均分配 */
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }
    </style>
</head>

<body>
    <section>
        <div class="box-1">
            <span></span>
        </div>
        <div class="box-2">
            <span></span>
            <span></span>
        </div>
        <div class="box-3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box-4">
            <div class="left">
                <span></span>
                <span></span>
            </div>
            <div class="right">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box-5">
            <div class="left">
                <span></span>
                <span></span>
            </div>
            <div class="center">
                <span></span>
            </div>
            <div class="right">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box-6">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </section>
</body>

总结

今天你学废了码?
答应我收藏学起来,别放在收藏夹里面吃灰了,好吗?
博主会不定期更新一些好玩的案例和大家一起学习进步的,如果你想要制作旋转动起来的骰子,请看参考这篇博客旋转魔方
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/6297.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!