flex布局实现骰子六面的示例

最新推荐文章于 2024-07-24 16:53:23 发布
最新推荐文章于 2024-07-24 16:53:23 发布
阅读量807 收藏 6
点赞数 4
分类专栏： CSS 文章标签： html css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ebwren/article/details/114032441
版权

显示效果：
在这里插入图片描述

下面是示例代码：

<html>
  <head>
    <title>flex布局-骰子</title>
    <style>
      body {
        background-color: tan;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
      }
      .box {
        background-color: white;
        border-radius: 10px;
        width: 75px;
        height: 75px;
        display: flex;
        margin: 10px;
        padding: 10px;
      }
      .item {
        background-color: darkblue;
        border-radius: 10px;
        width: 20px;
        height: 20px;
      }

      .box1 {
        justify-content: center;
        align-items: center;
      }
      .box1 .item {
        background-color: red;
        border-radius: 15px;
        width: 30px;
        height: 30px;
      }

      .box2 {
        justify-content: space-around;
        align-items: center;
      }

      .box3 {
        justify-content: space-around;
      }
      .box3 .item:nth-child(2) {
        align-self: center;
      }
      .box3 .item:nth-child(3) {
        align-self: flex-end;
      }

      .box4 {
        flex-wrap: wrap;
        align-content: space-around;
      }
      .box4 .column {
        flex-basis: 100%;
        display: flex;
        justify-content: space-around;
      }
      .box4 .item {
        background-color: red;
      }

      .box5 {
        flex-wrap: wrap;
        align-content: space-between;
      }
      .box5 .column {
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
      }
      .box5 .column:nth-child(2) {
        justify-content: center;
      }
      .box5 .item {
        margin: 2px;
      }

      .box6 {
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
      }
    </style>
  </head>
  <body>
    <div class="box box1">
      <span class="item"></span>
    </div>

    <div class="box box2">
      <span class="item"></span>
      <span class="item"></span>
    </div>

    <div class="box box3">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>

    <div class="box box4">
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
    </div>

    <div class="box box5">
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
      <div class="column">
        <span class="item"></span>
      </div>
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
    </div>

    <div class="box box6">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>
  </body>
</html>
同熙
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局实现无缝滚动的示例代码
11-20
本篇文章将通过一个实例，介绍如何使用Flex布局实现无缝滚动效果。 首先，我们要了解Flex布局的基本概念。在Flex布局中，父元素被称为flex容器（flex container），子元素被称为flex项目（flex item）。通过设置`...
使用flex布局轻松实现页面布局的示例代码
01-18
1、上中下布局： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document<...
flex布局小案例——制作骰子
super码力的博客
11-08 4796
制作点数一到六的骰子，看了这篇还不会制作骰子，欢迎私信！制作骰子首先需要学会flex的基础原理
详解flex布局做骰子案例
yun_shuo的博客
12-26 6032
详解flex布局做骰子案例 上次案例用到了css3的3D特效，3D特效做正方体也是很常用的，所有我想到了利用css3做一个骰子，而骰子每一面的点数利用定位做起来很麻烦，利用css3的flex布局是很方便的，这次来看看如何利用flex弹性盒子的一些属性完成骰子点数的布局~ 首先，建立一个3D空间元素，做成正方体，是上一篇中详细介绍过如何创建一个3D空间元素，这里就不细说了~实现一个正方体的原理是，在一个父元素中包含六个子元素，transform:rotate和translate来转变好每一个的面，在编写过程中
Flex 布局教程：实例篇
weixin_51341611的博客
03-21 1074
介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅。我的主要参考资料是的文章和。
Flex布局及其应用场景
Wonder
07-05 2538
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Fle...
2. Flex布局和grid布局
sunnnnh的博客
05-10 717
阮一峰博客： （1）Flex 布局教程：语法篇 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html （2）Flex 布局教程：实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html （3）grid布局 https://blog.csdn.net/weixin_44202459/article/details/88653661?ops_request_misc=...
自动旋转的骰子代码html,css3 flex布局结合transform生成一个3D骰子(示例代码)
weixin_35347870的博客
05-30 804
1 Flex 布局首先聊聊Flex 布局，Flex 布局又称“弹性布局”，任何容器都可以指定为Flex布局，设置Flex布局会使得子元素的float、clear、vertical-align失效1.1 Flex属性1.1.1 flex-direction：决定项目的排列方向，默认自左向右水平排列.box {flex-direction: row | row-reverse | column | c...
Flex 布局教程
qw_xingzhe的专栏
06-19 408
语法篇 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到
Flex 布局教程：语法和实例
weixin_30917213的博客
06-06 61
语法篇 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全...
[转]详解Flex布局（语法+教程）
思月行云
01-21 192
Flex 布局教程：语法篇 作者：阮一峰 原文：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前...
css3 flex布局实现平均分配元素的示例代码
11-20
本篇文章将深入探讨如何使用Flex布局来实现元素的平均分配。 首先，我们来看例子一： ```html <!DOCTYPE html> <title>flex 布局 * { padding: 0; margin: 0; } body, html { height: 100vh; min-...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
vue flex 布局实现div均分自动换行的示例代码
12-28
 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客，我们主要用到flex布局的一个换行属性，它是flex-wrap: wrap，自动换行。 二、vue代码 （1）html部分： &...
【HTML】iframe
小秀的博客
07-24 426
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
最新发布
柯晓楠
07-24 3370
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
基于 HTML+ECharts 实现监控平台数据可视化大屏（含源码）
柯晓楠
07-24 1168
我们实现了一个基于 HTML 和 ECharts 的监控平台数据可视化大屏。这个大屏不仅能够直观地展示监控数据，还能通过交互功能提升用户体验。希望本文能对你在实现类似项目时提供一些帮助和启发。
初识HTML文件，创建自己的第一个网页！
2301_79959126的博客
07-24 1008
本文旨在初步介绍HTML（超文本标记语言），帮助读者理解HTML中的相关术语及概念，并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。
flex布局实现数字键盘
08-04
引用[1]:在使用flex布局实现数字键盘时，可以将数字键盘的每个按键都设置为一个flex项，然后使用flex容器来包裹这些按键。可以使用flex-direction属性来控制按键的排列方向，比如设置为row可以实现水平排列，设置为column可以实现垂直排列。可以使用flex-wrap属性来控制按键的换行方式，比如设置为wrap可以实现按键的自动换行。可以使用flex-grow属性来控制按键的伸缩比例，可以根据需要设置不同的伸缩比例来实现按键的宽度自适应。可以使用flex-basis属性来控制按键的初始宽度，可以根据需要设置不同的初始宽度来实现按键的大小调整。可以使用justify-content属性来控制按键在主轴上的对齐方式，比如设置为center可以实现按键在水平方向上的居中对齐。可以使用align-items属性来控制按键在交叉轴上的对齐方式，比如设置为center可以实现按键在垂直方向上的居中对齐。可以使用align-content属性来控制按键在交叉轴上的对齐方式，比如设置为center可以实现按键在垂直方向上的居中对齐。以上是使用flex布局实现数字键盘的一些基本思路和属性的使用方法，具体的实现方式可以根据实际需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值