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

已于 2022-06-12 11:20:01 修改
阅读量4.5k 收藏 56
点赞数 17
分类专栏： # HTML和CSS学习笔记 文章标签： css css3 html flex
于 2021-11-08 16:07:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61843874/article/details/121196912
版权

文章目录

前言

看了这篇还不会制作骰子，欢迎来找我！
制作骰子首先需要学会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>

总结

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

super码力
关注
  • 17
    点赞
  • 踩
  • 56
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
使用flex制作倒计时
03-01
NULL 博文链接：https://feuyeux.iteye.com/blog/266986
Flex制作的MP3
08-29
没事的时候，做的一个flexmp3播放器，呵呵 大家相互学习了
小程序flex布局祥解.xlsx
05-26
对小程序中flex布局中用到的代码做了祥尽的整理。
FlexLayout布局微信小程序源码
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。
Flex布局在小程序的使用
03-29
Flex布局是一种十分灵活方便的布局方式，目前主流的现代浏览器基本都实现了对Flex布局的完全支持。而在微信小程序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都实现了对Flex的支持。所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，并直接使用wxss来编写例子，运行环境是小程序的开发者工具。 Flex布局的基本概念 Flex布局直接应用于一个Flex容器，布局的对象是容器中的各个项目元素（“item”）。项目元素布局的核心概念在于两条轴：主轴和交叉轴，通过控制项目元素在主轴、交叉轴上的排列方式进
移动web开发实例flex布局案例源码
02-16
移动web开发实例flex布局案例源码
flex布局实现骰子的6种布局
叶小桃的博客
06-13 1399
思路：首先是纵向布局flex-direction: column，并且主轴方向将其两端对齐justify-content: space-between（也就是上下靠边），然后将第二个子元素居中对齐align-self: center，第三个子元素靠后对齐align-self: end。整个页面分为6骰子的面，分别为点数1到6。点数1：典型的居中布局。
Flex布局--骰子布局
m0_63318949的博客
03-10 2202
flex实现骰子布局
flex布局实战——骰子案例
delong1998的博客
03-02 1023
flex布局实战——筛子案例 下面将用flex布局来以次生成各个筛子。 初始化页面 css代码： <style> .main { width: 200px; height: 200px; border: #999999 solid 1px; } .box { width: 30%;
【CSS flex布局】用flex写个骰子
Hemri2580的博客
10-20 1131
用flex写个骰子
微信小程序Flex布局用法深入浅出分析
10-17
主要介绍了微信小程序Flex布局用法,深入浅出地罗列分析了flex弹性布局常见的属性、功能及使用方法,需要的朋友可以参考下
flex布局分享.pptx
11-06
flex布局培训PPT，适用于H5,小程序，ReactNative,Flutter的布局教程。
浅谈微信小程序flex布局基础
12-29
1：Flex布局 Flex布局如图1所示 图1 1.1 Flex容器属性 1.2 Flex容器内元素属性 align如果定义会覆写掉容器属性中的justify-content，align-items设置的属性 微信小程序开发工程中，新建文件layout，然后新建各种文件（以layout命名）， 在layout.wxml中加入如下代码： <view class=container1> <view class=item1> 1 </view> <view class=item1> 2 </view> <view class=item1> 3 </vi
微信小程序——FlexLayout布局（截图+源码）.zip
04-17
微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip 微信小程序——FlexLayout布局（截图+源码）.zip
【移动端网页布局】Flex 弹性布局案例 ③
03-06
【移动端网页布局】Flex 弹性布局案例 ③
微信小程序 Flex布局详解
11-22
微信小程序页面布局方式采用的是Flex布局。 Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的...
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：...
CSS特性
lan_da_wang的博客
04-29 238
化简代码，定位问题，解决问题。
nuxt3使用记录五：禁用莫名其妙的Tailwind CSS(html文件大大减小)
最新发布
lsjweiyi的博客
04-29 169
平时没注意看，这时候看，猜测是nuxt的默认配置就会加载这玩意，关键我想不明白一个css，为啥要默认加载呢？下面那个style，也不是我写的，我试着删掉，发现对项目也没影响，而且也是每个html文件都有。看到是跳过了这玩意，所以nuxt3这玩意，还有很多可以琢磨的地方，50k star的成熟项目也有不成熟的地方嘛。然后我记得在官网看过它，去搜索，果然，这些nuxt自带的一个样式，不过没说为啥要引用他。发现这个问题是因为，今天我突然很好奇，我发现之前构建的自动产生的。我全局搜索我的项目，都没有引用这玩意！
用flex布局制作骰子
07-27
使用flex布局制作骰子可以通过以下步骤实现： 1. 首先，设置一个容器元素，比如ul标签，作为骰子的外部容器。设置宽度、高度、背景颜色等样式属性，同时使用flex布局设置justify-content为space-around，flex-wrap为wrap，align-items为center，以实现骰子的布局效果。\[3\] 2. 在容器元素内部，使用li标签作为骰子的每个面。设置li元素的宽度、高度、边框、背景颜色、边框圆角等样式属性，同时使用flex布局使其内部元素水平垂直居中。\[3\] 3. 在每个li元素内部，使用span标签作为骰子的点数。设置span元素的宽度、高度、背景颜色、边框圆角等样式属性，以实现点数的样式效果。\[3\] 通过以上步骤，就可以使用flex布局制作一个骰子的效果。\[1\] #### 引用[.reference_title] - *1* [flex布局(骰子布局)](https://blog.csdn.net/weixin_54420874/article/details/123097960)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [【CSS flex布局】用flex写个骰子](https://blog.csdn.net/Hemri2580/article/details/127433171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

super码力

么么哒，夏天来块儿冰西瓜！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值