【CSS flex布局】用flex写个骰子

最新推荐文章于 2024-03-01 16:16:38 发布
最新推荐文章于 2024-03-01 16:16:38 发布
阅读量1.1k 收藏 11
点赞数 1
分类专栏： 前端开发记录 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hemri2580/article/details/127433171
版权

注：新手练习

在这里插入图片描述

基本思路

HtML部分：

一个大 ul 包裹6个 li，也就是6个骰子，每个 li 中的 span 对应一个骰子点数

<ul>
        <li>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>

CSS部分：

先设置统一的样式，六个筛子的大小、边框、颜色，骰子内部点数的大小、颜色保持一致。给所有 li 设置 flex 属性

    ul {
           width: 400px;
           height: 400px;
           background-color: beige;
           display: flex;
           justify-content: space-around;
           flex-wrap: wrap;
           align-items: center;
           background-color: green;
       }
       /* 骰子统一样式 */
       li {
           width: 100px;
           height: 100px;
           border: 1px solid black;
           background-color: white;
           border-radius: 20%;
           display: flex;
       }
       /* 点数统一样式 */
       span {
           width: 30px;
           height: 30px;
           background-color: blue;
           border-radius: 50%;
       }

第1个骰子：

只需设置主轴和侧轴居中即可

 ul :nth-child(1) {
            justify-content: center;
            align-items: center;
        }

第2个骰子：

改变主轴，两边环绕对齐，再居中

 ul :nth-child(2) {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

第3个骰子：

这个骰子比较特殊，是斜着对齐的，所以要使用align-self属性。先设置一个环绕，再分别对第二个和第三个点数控制。(这里由于筛子的圆角设置了成了20%，避免斜着对齐离边框太近，就设置了一下内边距。)

 ul :nth-child(3) {
            justify-content: space-around;
            box-sizing: border-box;
            padding: 5px;
        }

        ul :nth-child(3) :nth-child(2) {
            align-self: center;
            background-color: red;
        }
        
        ul :nth-child(3) :nth-child(3) {
            align-self: flex-end;
        }

第4个骰子：

flex-wrap: wrap;属性让点数位置不够就能自动换下一行。设置点数的左右外边距，用于撑开第三个点数去第二行。

 ul :nth-child(4) span {
            margin: 0 10px;
        }
        
        ul :nth-child(4) {
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

第5个骰子：

这里可以先看一下设置完环绕之后的效果（红色为第三个点数），要解决就是让第三个居中，并且让第四个点数下去。

 ul :nth-child(5) {
            justify-content: space-around;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 5px;
        }

在这里插入图片描述

在做到这个地方的时候，我的想法是给第三个点数加外右边距margin-right，第四个不就下去了！？！，也确实下去了，然后成了这样。但第三个不居中，那怎么办？

在这里插入图片描述

那就再来一个左外边距，只要保证中间一行没有点数，配合flex-wrap: wrap;,第三个点数自然就会居中。

 ul :nth-child(5) {
            justify-content: space-around;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 5px;
        }
        
        ul :nth-child(5) :nth-child(3) {
            background-color: red;
            margin-left: 20px;
            margin-right: 20px;
        }

第6个骰子：

这个比较简单，不做描述

 ul :nth-child(6) {
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }

梳理：

练习完这个flex布局，不仅对flex加深了理解，也对子代选择器更加的熟练了。在进行第三个筛子设置的时候，选择第二个点数的效果迟迟不出现（ ul :nth-child(3)），原因是标签要与子代选择器一个间距，怪我太粗心！想要选择骰子内具体的点数，可以在其后再接一个nth-child（ ul :nth-child(3) :nth-child(2) ）。

大部分情况，flex + margin 就能解决很多布局，其余部分就是细微的调整了。

完整代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        ul {
            width: 400px;
            height: 400px;
            background-color: beige;
            margin: 20px auto;
            border-radius: 25%;
            padding: 10px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
            background-color: green;
        }
        /* 骰子统一样式 */
        
        li {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: white;
            border-radius: 20%;
            display: flex;
        }
        /* 点数统一样式 */
        
        span {
            width: 30px;
            height: 30px;
            background-color: blue;
            border-radius: 50%;
        }
        /* 标签要与:nth-child 隔开一点，不然不生效*/
        /* 第 1 个骰子 */
        
        ul :nth-child(1) {
            justify-content: center;
            align-items: center;
        }
        /* 第 2 个骰子 */
        
        ul :nth-child(2) {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        /* 第 3 个骰子 */
        
        ul :nth-child(3) {
            justify-content: space-around;
            box-sizing: border-box;
            padding: 5px;
        }
        
        ul :nth-child(3) :nth-child(1) {
            /* align-self: flex-start; */
        }
        
        ul :nth-child(3) :nth-child(2) {
            align-self: center;
            background-color: red;
        }
        
        ul :nth-child(3) :nth-child(3) {
            align-self: flex-end;
        }
        /* 第 4 个骰子 */
        
        ul :nth-child(4) span {
            margin: 0 10px;
        }
        
        ul :nth-child(4) {
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        /* 第 5 个骰子 */
        
        ul :nth-child(5) {
            justify-content: space-around;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 5px;
        }
        
        ul :nth-child(5) :nth-child(3) {
            background-color: red;
            margin-left: 20px;
            margin-right: 20px;
        }
        /* 第 6 个骰子 */
        
        ul :nth-child(6) {
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
</body>

</html>
Hemri_
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中的弹性盒筛子的制作
等待のL先森的博客
12-03 605
css中的弹性盒筛子的制作 运用简单的flex的基本属性，做成六个筛子的面；后面还有动态的筛子； 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css中的弹性盒筛子的
利用css实现骰子布局
2301_78101696的博客
05-12 221
在css中利用弹性盒实现骰子布局：
css3-flex制作骰子
sam80000的博客
12-13 254
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> /* =============================
超简洁方式 : ul＞li结构+flex布局实现骰子效果
i-cat的博客
01-30 639
如何通过ul>li结构+flex布局实现骰子效果?
CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）
最新发布
朝阳39的博客
03-01 1244
height;width;border;;/* 容器内元素使用flex布局 */display;/* 主轴居中对齐 */;.point;height;width;background;/* align-self 写在子元素上，覆盖父元素指定的交叉轴对齐方式 */align-self;
CSS布局之使用Flex布局画骰子（5点）
ThisEqualThis的博客
02-15 829
这次画5个点的骰子。大家可以先看图片默写代码，然后与文中代码做校验，来验证自己是否理解了Flex布局。若无基础，请优先阅读学习此文档。
css3以及flex布局配合画骰子dice.html
05-17
css3以及flex布局配合画骰子
移动web开发实例flex布局案例源码
02-16
本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并掌握这一强大的CSS布局模式。 1. Flex布局基础： Flex布局允许开发者轻松地调整元素的大小和位置，以适应不同屏幕尺寸和设备...
CSS3的Flexbox骰子布局的实现及问题讲解
12-30
一、First Face我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现： CSS Code复制内容到剪贴板  class> <span u00a0class=dot></span> ...
html面试常考考点+css常考考点
09-21
Flex 画色子可以用于实现各种布局，通过设置 flex-direction、justify-content、align-items、flex-wrap 等属性可以实现不同的布局效果。 CSS 定位 1. Absolute 和 Relative 定位 Absolute 定位依据最近一层的...
flex布局(骰子布局)
weixin_54420874的博客
02-23 2159
1、应该都知道使用VS来敲写页面的第一步就是新建文件夹，(也可以建文件夹：这是指只有html没有css与js才可以的)。然后，可以在VS中打开文件夹，也可以直接把文件夹拖进去(这有两种方法，任意一种就行了、建议你直接拖进去，因为方便)。 2、这次的页面是一个骰子布局(也叫flex布局)，大家应该都知道骰子是什么，就有六个面一个面对应一个数字，但面是一样的，只是上边的圆点不相同。也就是从一到六，“一”就一个圆点，“二”就两个圆点。以此类推。这次我们就只敲一个面，就是“二”那一面。 3、这就是进来后的效果了
CSS3制作骰子
weixin_45908839的博客
04-23 660
body { perspective: 1000px;/*透视效果必须设置在父元素 因为我下面 父元素要转动 所有写在body里面*/ /* perspective-origin: 50% 50%; 该属性表示沿着哪个方向移动 该属性默认就是50% 50%*/ } .box { width: 100px; ...
用flex布局实现骰子
liubangbo的专栏
01-28 2525
实现6个骰子，如下图所示： 代码如下： <html> <head> <style type="text/css"> #bg{ height: 200px; outline: red dotted thin; display: inline-flex; /*不用定义此容器的宽度，宽度根据容器元素进行自适应*/ } ....
用flex布局写骰子
exploringfly的博客
02-22 2830
骰子一共有6个面，先构建6个div，写上样式：.box1 { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; margin:...
立体骰子实现3D炫酷旋转效果（附完整源码）（附动画代码）
qq_46034942的博客
02-12 2965
整体思路：首先搭建骰子整体的立方体 1.先搭建前后两个面(front和back)，通过定位（子绝父相）将两个盒子定位在立方体正面，此时一面遮挡了另一面，在父盒子中添加transform-style: preserve-3d;达到3d立体效果，将前盒子沿z轴正方向移动高一半距离，后盒子沿z轴负方向移动高一半距离，前后盒子搭建完成，可搭配hover和过渡查看效果； 2.左右盒子与步骤1类似，不过左右盒子是需要进行左右移动高一半距离，且需要绕Z轴转动； 3.与左右盒子搭建类似，需要绕X轴转动，需要沿Y轴上下
Flex布局实现骰子
young_jrue的博客
03-31 453
通过CSS3中Flex布局实现骰子
[css3] Flex布局 —— 实例篇(骰子示例)
qq_14993591的博客
08-12 297
1.1 单项目 1 首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。 .box { display: flex; } 2 设置项目的对齐方式，就能实现居中对齐和右对齐。 justify-content,调整子元素在主轴上的对齐方式 .box { display: flex; justify-content: center; } 3 .box { display: flex; justify-content: flex-end; } 4 设置交
flex 布局骰子
马金波
06-09 239
dice.scss .main { width: 100%; height: 100%; display: flex; -webkit-display: flex; flex-direction: row; justify-content: space-around; align-items: center; // justify-content: center; vertical-align: center; flex-wra
纯CSS3制作骰子3D旋转动画效果
crippty的博客
03-18 5167
闲暇之余看了一些关于CSS3的3D动画方面的文章，自己写了一个3D骰子旋转动画效果，代码分享给大家。先直接上效果图：1.首先创建一个div用来装骰子（手动滑稽）&lt;div class="stage"&gt;&lt;div class="club&gt;&lt;div class="front"&gt;&lt;/div&gt;

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值