flex布局---九种色子案例分析

最新推荐文章于 2025-05-24 10:33:37 发布
原创 最新推荐文章于 2025-05-24 10:33:37 发布 · 511 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flex布局

九种色子案例代码：
效果图：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            display: flex;
        }

        .container {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background: #fff;
            box-shadow: 3px 3px 3px 0px #999;
            display: flex;
        }

        .item {
            width: 30px;
            height: 30px;
            background: aqua;
            border-radius: 50%;
            /*可以绘制成一个圆形*/
            box-shadow: 1px 1px 2px 0px blue;
        }

        /* 一点 */
        .one {
            justify-content: center;
            align-items: center;
        }

        /* 两点 */
        .two {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        /* 三点 */
        .three {
            justify-content: space-around;
            align-items: center;

        }

        .three div:first-child {
            align-self: flex-start;
        }

        .three div:last-child {
            align-self: flex-end;
        }

        /* 四点 */
        .four div {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
        }

        /* 五点 */
        .five {
            justify-content: space-around;
            flex-direction: column;
            /* align-items: center; */
        }

        .five div {
            display: flex;
            justify-content: space-around;
        }

        /* 六点 */
        .six {
            justify-content: space-around;
            align-items: center;
        }

        /* 七点 */
        .seven div {
            display: flex;
            flex-wrap: wrap;
            align-self: center;
            justify-content: space-around;
        }

        /* 八点 */
        .eight div {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;

        }

        /* 九点 */
        .nine {
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 容器 -->
        <!-- 一点 -->
        <div class="container one">
            <!-- 项目 -->
            <div class="item"></div>
        </div>
        <!-- 二点 -->
        <div class="container two">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <!-- 三点 -->
        <div class="container three">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <!-- 四点 -->
        <div class="container four">
            <div>
                <div class="item four_first"></div>
                <div class="item four_second"></div>

            </div>
            <div>
                <div class="item four_three"></div>
                <div class="item four_four"></div>

            </div>

        </div>
        <!-- 五点 -->
        <div class="container five">
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="item_seven">
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
        <!-- 六点 -->
        <div class="container six">
            <div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
        <!-- 七点 -->
        <div class="container seven">
            <div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>

            </div>
            <div>
                <div class="item"></div>

            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
        <!-- 八点 -->
        <div class="container eight">
            <div>
                <div class="item"></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 class="item"></div>
            </div>
        </div>
        <!-- 九点 -->
        <div class="container nine">
            <div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>

            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </div>
</body>

</html>
flex布局(骰子布局)
weixin_54420874的博客
02-23 2323
1、应该都知道使用VS来敲写页面的第一步就是新建文件夹，(也可以建文件夹：这是指只有html没有css与js才可以的)。然后，可以在VS中打开文件夹，也可以直接把文件夹拖进去(这有两种方法，任意一种就行了、建议你直接拖进去，因为方便)。 2、这次的页面是一个骰子布局(也叫flex布局)，大家应该都知道骰子是什么，就有六个面一个面对应一个数字，但面是一样的，只是上边的圆点不相同。也就是从一到六，“一”就一个圆点，“二”就两个圆点。以此类推。这次我们就只敲一个面，就是“二”那一面。 3、这就是进来后的效果了
17个典型的Flex应用案例介绍
12-02
具有代表性的17个Flex开发的应用介绍，具有一定参考价值
详解flex布局做骰子案例
yun_shuo的博客
12-26 6174
详解flex布局做骰子案例 上次案例用到了css3的3D特效，3D特效做正方体也是很常用的，所有我想到了利用css3做一个骰子，而骰子每一面的点数利用定位做起来很麻烦，利用css3的flex布局是很方便的，这次来看看如何利用flex弹性盒子的一些属性完成骰子点数的布局~ 首先，建立一个3D空间元素，做成正方体，是上一篇中详细介绍过如何创建一个3D空间元素，这里就不细说了~实现一个正方体的原理是，在一个父元素中包含六个子元素，transform:rotate和translate来转变好每一个的面，在编写过程中
CSS中的Flex（弹性盒子布局）的使用方法、使用场景、使用案例、
最新发布
DaKangya的博客
05-24 416
布局类型语法组合水平居中垂直居中完全居中水平两端对齐垂直排列支持换行。
flex布局骰子案例
qq_40783848的博客
07-18 579
此案例基于 flex 语法简单实现骰(tou)子1到6点，希望对于了解 flex会有帮助 和 flex 语法篇一起看效果更佳，点击前往 想要实现骰子1到6点，可以想到我们需要一个骰子模型和一个点模型 骰子模型： .container { display: flex; padding: 10px; width: 150px; heigh...
flex布局案例（骰子）
Pursuit53的博客
03-10 436
运用flex布局写骰子
flex布局实战——骰子案例
delong1998的博客
03-02 1281
flex布局实战——筛子案例 下面将用flex布局来以次生成各个筛子。 初始化页面 css代码： <style> .main { width: 200px; height: 200px; border: #999999 solid 1px; } .box { width: 30%;
flex布局-flex-layout-master.zip
01-03
Flex布局，全称为“Flexible Box”，也常被称为 Flexbox，是一种在CSS3中引入的布局模式，用于处理复杂的网页布局问题。它旨在提供一种更加灵活、动态的方式来组织和对齐内容，尤其适用于单列和多列布局，以及响应式...
flex布局--顶部/底部固定
06-18
flex布局实现顶部导航，底部导航固定，内容区内容高度超过可展示区域时出现滚动条，内容高度不足时铺满屏幕。
flex布局-携程网-移动端
02-23
在移动互联网领域，为了实现灵活、响应式的网页设计，开发者们常常会采用Flex布局，这是一种在CSS3中引入的布局模式。本项目“flex布局-携程网-移动端”旨在通过运用Flex布局，来构建携程网的主页面、我的页面以及...
flex布局-仿x程网源码.zip
06-15
Flex布局，全称为“Flexible Box”，也被称为弹性盒布局，是CSS3中的一种布局模式，旨在提供更加灵活的盒状模型来处理复杂和多变的网页布局。在仿x程网源码中，我们可以深入理解Flex布局在实际项目中的应用。 在...
携程首页（flex布局-移动端）
03-08
通过这些Flex布局的应用，携程首页能够在保持设计一致性的同时，提供优秀的用户体验，无论用户使用何种设备访问。理解并熟练掌握Flex布局，对于Web开发者来说至关重要，因为它已经成为构建现代网页布局的必备工具。
flex 布局骰子
马金波
06-09 286
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
flex布局实现色子
liona_koukou的博客
10-11 4282
1、色子数：1 思路：让圆点（即子元素）在横轴上居中在竖轴上居中，分别用justify-content和align-items 实现代码：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/
flex色子练习
frank_fong的博客
12-13 358
flex色子练习 .con { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 50px; height: 50px; padding: 5px; margin-bottom: 10px; border: 1px solid silver;
用flex布局实现骰子
liubangbo的专栏
01-28 2595
实现6个骰子，如下图所示： 代码如下： <html> <head> <style type="text/css"> #bg{ height: 200px; outline: red dotted thin; display: inline-flex; /*不用定义此容器的宽度，宽度根据容器元素进行自适应*/ } ....
flex布局中的骰子的布局
分享学习编程中的遇到的问题,总结平时的笔记
06-15 1309
1.单项目布局 一个 <!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"> <t
flex布局实例：骰子的布局
DurianPudding的博客
02-22 619
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;骰子实例&amp;lt;/title&amp;gt;
Flex布局-骰子demo
Rainy_X的博客
04-21 595
最近学习了Flex布局，以下是阮一峰老师关于Flex的博客  。在此感谢他让我get一项新技能！Flex语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html1、色子数：1思路：让圆点（即子元素）在横轴上...
flex---骰子案例
03-15
### 使用 Flex 布局实现骰子效果 通过 CSS 的 Flex 布局可以轻松创建具有灵活性和响应性的设计。以下是基于提供的引用内容以及专业知识，展示如何使用 Flex 布局绘制一个五点的骰子。 #### HTML 结构 HTML 提供了一个简单的容器结构用于定义骰子及其内部的点位。 ```html <div class="dice-container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ``` #### CSS 样式 利用 Flex 布局特性设置骰子的整体样式，并调整各个点的位置使其呈现为五点分布模式。 ```css .dice-container { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ width: 100px; height: 100px; border: 2px solid black; background-color: white; position: relative; } .box { width: 10px; height: 10px; background-color: black; border-radius: 50%; /* 圆形点 */ position: absolute; } /* 定义五个黑点的具体位置 */ .box:nth-child(1) { top: 20%; left: 20%; } /* 左上角点 [^1]*/ .box:nth-child(2) { top: 80%; left: 20%; } /* 左下角点 */ .box:nth-child(3) { top: 50%; left: 50%; } /* 中心点 [^1]*/ .box:nth-child(4) { top: 20%; right: 20%; } /* 右上角点 [^1]*/ .box:nth-child(5) { bottom: 20%; right: 20%; } /* 右下角点 [^1]*/ ``` 上述代码实现了五点排列方式的骰子外观。其中 `.dice-container` 是整个骰子区域，而 `nth-child()` 被用来分别定位每一个黑色圆点到合适的地方。 对于六面体的情况，在实际应用时可以通过嵌套多个这样的单一面板并组合起来形成完整的立体视觉效果[^2]。 #### 总结 此方案展示了如何借助 CSS 的 Flex 布局技术构建出既美观又易于维护的二维平面图形——骰子图案。它不仅限于静态显示用途，还可以进一步扩展应用于动态交互场景之中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值