Flex布局练习案例-六点骰子

最新推荐文章于 2023-10-17 16:36:23 发布
最新推荐文章于 2023-10-17 16:36:23 发布
阅读量296 收藏 1
点赞数 2
文章标签： flex css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/computer_10/article/details/117326262
版权

HTML部分

实现效果

<!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>色子例子</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            display: flex;
        }
        .One{
            border :2px solid blue;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 30px;
            box-shadow: 3px 3px 3px 3px;

            display: flex;

            justify-content: center;
            align-items: center;
        }
        /*.Two{*/
        /*    border :2px solid blue;*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    border-radius: 10px;*/
        /*    margin: 30px;*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*    justify-content: space-around;*/
        /*    align-items: center;*/
        /*}*/
        .Two{
            border :2px solid blue;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .Three{
            border :2px solid blue;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .Three div:first-child{
            align-self:flex-start;
        }
        .Three div:last-child{
            align-self:flex-end;
        }
        .Four{
            border :2px solid blue;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .Four div{
            display: flex;
            justify-content: space-around;
        }
        .item{
            background-color: blue;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            box-shadow: 1px 1px 1px 1px;
        }
        .Five{
            border :2px solid blue;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .Five div{
            display: flex;
            justify-content: space-around;
        }
        .Six{
            border :2px solid blue;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            margin: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .Six div{
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>
<body>
<div class="wrap">
    <!-- 一点 -->
    <div class="One">
        <div class="item"></div>
    </div>
    <!-- 两点 -->
    <div class="Two">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- 三点 -->
    <div class="Three">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
<!--    四点-->
    <div class="Four">
        <div class="FourA">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="FourB">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
<!--    五点-->
    <div class="Five">
        <div class="FiveA">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="FiveB">
            <div class="item"></div>
        </div>
        <div class="FiveC">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
<!--    六点-->
    <div class="Six">
        <div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</div>
</body>
</html>
???19?
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用flex布局实现六个骰子
Roronna_Zoro的博客
01-24 1498
一、初步布局 1、我们先设立一个外部盒子用flex布局将子代居中 .father { display: flex; margin: 200px auto; border-top: 2px solid #828384; width: 1200px; height: 300px; justify-content: space-around; } 再使用亲代选择器设置骰子盒子css .father>di
Flex布局案例练习（一）
JHY97的博客
01-24 491
练习flex布局，以输入框为例 1.代码
关于flex练习的案例.zip
07-03
关于flex案例练习
flex布局实现骰子六面的示例
同熙
02-24 803
下面是示例代码： <html> <head> <title>flex布局-骰子</title> <style> body { background-color: tan; display: flex; flex-wrap: wrap; align-content: flex-start; } .box { back
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 11万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
flex布局-flex-layout-master.zip
01-03
6. **响应式设计**：Flex布局非常适合创建响应式的网页，因为它可以根据窗口大小的变化自动调整元素的布局。通过媒体查询（Media Queries）可以针对不同设备或屏幕尺寸设置不同的Flex属性，实现更好的适应性。 在...
前端学习--用flex布局来写--携程首页
05-11
在前端开发领域，布局设计是至关重要的，而Flex布局（Flexible Box Layout）是现代Web页面布局的主流方式之一。本文将深入探讨如何使用Flex布局来重构携程首页，并结合HTML和CSS进行实现，不涉及JavaScript部分。 ...
详解解决flex布局的justify-content: space-between对齐方式的一个BUG的两种方法
12-13
在设置display:flex,justify-content: space-betweend的时候，它会把子元素靠边对齐平均分剩余的空间。 例如：打算一行放三个子元素 效果： 这看起来一点问题都没有，还挺好看的，但是如果下一行不够三个呢，只有...
移动web开发实例flex布局案例源码
02-16
通过学习这些Flex布局案例，你可以应用到实际项目中，比如创建响应式菜单、自适应图片网格、滚动同步效果等，提升移动Web应用的交互性和视觉一致性。 总之，Flex布局为移动Web开发提供了强大的布局工具，通过深入...
详解flex布局中flex-grow与flex-shrink的计算方式
11-21
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局，其中决定 Flex 布局内项目宽度/高度的是三个属性： flex-basis, flex-grow, flex-shrink. flex-basis 　flex-basis 决定了项目占据主轴的空间，除非使用 box-...
微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）
最新发布
kissship的博客
10-17 2229
Flex 弹性布局是一种用于网页布局的现代 CSS 技术，旨在更灵活地管理容器内的元素排列和分布，以实现响应式设计和更好的页面布局控制。Flex 布局基于弹性盒子模型，通过使用属性，你可以将一个容器转变为一个弹性容器，从而控制其内部子元素的排列方式。
使用flex布局实现,7种经典布局案例
baidu_21349635的专栏
09-01 4306
flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *!/* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *//* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *//* flex-grow定义该项目不分配剩余空间 *//* flex-grow定义main占满剩余空间 *//* flex-grow定义该项目不分配剩余空间 *//* flex-grow定义main占满剩余空间 */
flex布局练习题，面试必备，持续更新建议收藏~
你好呀，很高兴你在看这里~
06-15 5230
现在网页布局大多都是flex布局，像浮动这些用得比较少，在面试中flex也是被经常问到的。而有些同学学完flex后，又不懂怎么练习巩固，所以，所以，所以，我汇聚了一些常见的flex的练习题案例，写完再次加强掌握flex~
Flex弹性盒子布局实现骰子6点
彭世瑜的博客
09-28 4781
1、基础样式 h2{ text-align: center; } .main{ display: flex; flex-wrap: wrap; width: 680px; justify-content: space-between; } .container{ display: flex; width: 320px; heigh...
Flex布局--骰子布局
m0_63318949的博客
03-10 2468
flex实现骰子布局
html css做骰子,纯 CSS 制作摇骰子（随机结果）
weixin_30616309的博客
06-18 3497
大家好，我是 Steven。这一期，我们会做一个摇骰子的效果。等等，这个很容易？那就挑战一下，不用 JavaScript，只用 CSS 去制作，我们来看看怎么实现。素材准备首先，我们要准备一张图片：里面是骰子从一到六的面板，然后为了等下转骰子的时候看上去随机一点，这里我将一到六的顺序掉乱一下。HTML 的部分打开 CodePen 编辑器，在 HTML 的部分新增一个 ，class 是 dice。C...
用css实现骰子的六个面（flex布局的学习）
时间识人的博客
06-27 3449
一：flex弹性盒布局介绍 1：flex-direction属性 flex-direction属性决定主轴的方向，它的取值有以下几种： 1. row（默认值）：主轴为水平方向，起点在左端。 2. row-reverse：主轴为水平方向，起点在右端。 3. column：主轴为垂直方向，起点在上沿。 4. column-reverse：主轴为垂直方向，起点在下沿。 2：flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
Flex 布局教程：实例篇
Mirage
11-16 2485
转载自：阮一峰的网络日志 作者： 阮一峰 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节的HTML模板一律如下。 <div class="box"> <span class="item"></span> </div> 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目.
flex布局(骰子布局)
weixin_54420874的博客
02-23 2153
1、应该都知道使用VS来敲写页面的第一步就是新建文件夹，(也可以建文件夹：这是指只有html没有css与js才可以的)。然后，可以在VS中打开文件夹，也可以直接把文件夹拖进去(这有两种方法，任意一种就行了、建议你直接拖进去，因为方便)。 2、这次的页面是一个骰子布局(也叫flex布局)，大家应该都知道骰子是什么，就有六个面一个面对应一个数字，但面是一样的，只是上边的圆点不相同。也就是从一到六，“一”就一个圆点，“二”就两个圆点。以此类推。这次我们就只敲一个面，就是“二”那一面。 3、这就是进来后的效果了
flex布局的justify-content
10-12
flex布局的justify-content属性用于设置主轴上的对齐方式，常用的取值有： 1. flex-start：左对齐 2. flex-end：右对齐 3. center：居中对齐 4. space-between：两端对齐，项目之间的间隔相等 5. space-around：每...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值