专栏首页Nian糕的私人厨房CSS 使用 Flex 布局来制作一个骰子

CSS 使用 Flex 布局来制作一个骰子

Unsplash

我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置 9 个点数,但在这里我只列出了点数 1-6 的布局方式,剩余点数的布局大家可以自行尝试

在下面的代码中,我使用了 div 元素来表示骰子的一个面,使用 span 来代表一个点,只是简单的使用了一些 CSS 样式,读者可按自身喜好来设置其他 CSS 样式,我在下面使用到了 border-radius 属性,这是属于 CSS 3 的属性,用来设置边框圆角,即使元素没有边框,圆角也可以用到 background 上面,具体效果受 background-clip 影响, border-radius 是简写属性,是用来设置左上角 border-top-left-radius,右上角 border-top-right-radius,右下角 border-bottom-right-radius,左下角 border-bottom-left-radius 这四个值的,顺序记得不要弄错

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex骰子</title>
  <style type="text/css">
    .box {
      padding: 12px;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 8px;
      margin-bottom: 10px;
      display: flex;
    }
    span {
      width: 30px;
      height: 30px;
      background-color: black;
      border-radius: 15px;
    }
    .box1 {
      justify-content:center;
      align-items:center;
    }
  </style>
</head>
<body>
  <div class="box box1">
    <span class="item1"></span>
  </div>
</body>
</html>

点数 1

.box2 {
  justify-content:space-between;
}
.box2 .item2 {
  align-self:flex-end;
}

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

点数 2

.box3 {
  justify-content:space-between;
}
.box3 .item2 {
  align-self:center;
}
.box3 .item3 {
  align-self:flex-end;
}

<div class="box box3">
<!-- 快捷键为 span.item$*3 -->
  <span class="item1"></span>
  <span class="item2"></span>
  <span class="item3"></span>
</div>

点数 3

.box4 {
  flex-direction:column;
  justify-content:space-between;
}
.box4 div {    
  display: flex; 
  justify-content:space-between; 
}

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

点数 4

.box5 {
  flex-direction:column;
  justify-content:space-between;
}
.box5 div {    
  display: flex; 
  justify-content:space-between; 
}
.box5 .column {    
  justify-content:center; 
}

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

点数 5

.box6 {
  justify-content:space-between;
}
.box6 div {    
  display: flex; 
  flex-direction: column;
  justify-content:space-between; 
}

<div class="box box6">
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

点数 6

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 鼠标滑动,图片显示隐藏

    当一个区域需要展示多张图片,而该区域的空间大小受到限制时,我们可以通过这种方式来达到预览哪张图片就展示该图片,并隐藏其他图片的方式来达到目的,这就是简化版的手风...

    Nian糕
  • CSS 布局_1 盒模型

    盒模式是 CSS 中一个重要的概念,即元素在页面所占据的空间位置,盒模型的属性包括:内容 (content)、填充 (padding)、边框 (border)、...

    Nian糕
  • Vue 组件通信

    该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Vue-Communication 上了,有需要的同学可自行下载

    Nian糕
  • 创建一个新的 Huginn Agent

    请注意:Huginn API 一直在改进,因此一些无用的 Agent 或将被放弃。我们非常希望您能将您的使用方法以及 API 应该更改什么告诉我们。查看 #60...

    huginn 中文网
  • 筛选 RSS 源,制作新的全文 RSS 源

    问题:假如你喜欢的网站只提供摘要型的 RSS 源,但是你希望能在 RSS 阅读器中阅读全文 RSS,同时还希望它只推送某些特定的文章 解决方法:利用 Hugin...

    huginn 中文网
  • 前端每日实战:115# 视频演示如何用 CSS 和 D3 创作一组 π 数字的彩灯

    https://segmentfault.com/a/1190000016118926

    前端博客 : alili.tech
  • 论文赏析[ACL18]基于RNN和动态规划的线性时间成分句法分析

    Linear-Time Constituency Parsing with RNNs and Dynamic Programminggodweiyang.com

    godweiyang
  • linux 定时任务 Crontab 使用方法

    用户所建立的 crontab 文件中,每一行都代表一项任务,每行的每个字段代表一项设置,它的格式共分为六个字段,前五段是时间设定段,第六段是要执行的命令段,格式...

    huginn 中文网
  • React优化-JSX模板优化-标签化

    JSX是JavaScrip的一种扩展语法,JSX的标签语法既不是字符串也不是HTML; 从本质上讲,JSX只是为React.createElement(comp...

    前端博客 : alili.tech
  • 前端每日实战:77# 视频演示如何用纯 CSS 创作旗帜飘扬的动画

    https://segmentfault.com/a/1190000015621468

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券