文章目录

前言
一、HTML的结构
二、制作步骤
三、完整代码
总结

前言

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

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

一、HTML的结构

步骤：

首先准备6个大盒子分别装点数1~6的圆点；
每个盒子里面分别使用span来装小圆点；
点数4和5的制作会比其他的要多一步；点数4大盒子里面需要左右两个盒子来分别装span，点数5大盒子里面需要左中右三个盒子来装span；
给span设置大小颜色圆角；
通过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>

总结

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

flex布局小案例——制作骰子相关推荐

FLEXBOX FROGGY11-24level(flex布局小游戏)
FLEXBOX FROGGY11-24level(flex布局小游戏) FLEXBOX FROGGY11-24level(flex布局小游戏) level-11 使用 flex-direction 和 ...
利用flex布局实现六个骰子
一.初步布局 1.我们先设立一个外部盒子用flex布局将子代居中 .father {display: flex;margin: 200px auto;border-top: 2px solid #82 ...
html第八章制作花样链接卡,利用flex布局横向滚动制作滑动选项卡以及内容滑块...
利用flex布局横向滚动首先介绍一下什么是flex布局,为啥喜欢用flex布局呢,枫瑞之前在做项目的评论留言的时候采用浮动(float),又要两边对齐,有要左浮动,又要右浮动,最后话要防止塌陷.在认 ...
栅格布局小案例——图片展览
在学习Bootstrap的过程中,对栅格布局有了一定了解,完成了一个简单的小案例,图片展览,在不同大小的屏幕下显示的效果不一样. 其中还实现了轮播图的效果. 代码如下: <!DOCTYPE ht ...
css flex 布局小技巧和bug
小技巧: 实现如图子元素自动居于右下角 .container { display: flex;flex-direction: row;background: pink;}.child {backgr ...
js - flex布局测试案例:完美居中
<span>I love flex layout!</span> <style> body{ display:flex; justify-content:cente ...
javascript入门视频第一天小案例制作零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...
最简单的flex布局介绍（转自阮一峰）及筛子案例
大佬阮一峰在15年的博客至今我认为无人可以超越所以就直接引用他的博客 Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com) 在引用之后为一个flex布局小demo Fl ...

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

文章目录

前言

一、HTML的结构

二、制作步骤

三、完整代码

总结

flex布局小案例——制作骰子相关推荐

最新文章

热门文章