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

我在上一篇博文 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 这四个值的，顺序记得不要弄错

代码语言：javascript复制

<!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>

代码语言：javascript复制

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

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

代码语言：javascript复制

.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>

代码语言：javascript复制

.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>

代码语言：javascript复制

.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>

代码语言：javascript复制

.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>

css3

0 人点赞