### 彪哥

爱好前端

- HTML

- CSS

  - CSS教程和技巧收藏
  - flex布局语法
  - flex布局案例-基础
  - flex布局案例-骰子
  - flex布局案例-圣杯布局
  - flex布局案例-网格布局
  - flex布局案例-输入框布局
  - CSS3之transition过渡
  - CSS3之animation动画
  - 「布局技巧」图片未加载前自动撑开元素高度
  - 文字在一行或多行时超出显示省略号
  - 从box-sizing属性入手，了解盒子模型
  - 水平垂直居中的几种方式-案例
  - 如何根据系统主题自动响应CSS深色模式
  - 「css技巧」使用hover和attr()定制悬浮提示
  - CSS-function汇总
  - CSS给table的tbody添加滚动条

- 页面
- CSS

heBody
2019-12-25

# flex布局案例-骰子

# # flex布局案例-骰子

> 可用`F12`开发者工具查看元素及样式，可打开codepen在线编辑代码。

    <html>
      <div class="box2">
        <div class="first-face">
          <span class="pip"></span>
        </div>
        <div class="second-face">
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="third-face">
          <span class="pip"></span>
          <span class="pip"></span>
          <span class="pip"></span>
        </div>
        <div class="fourth-face">
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
        </div>
        <div class="fifth-face">
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
          <div class="column">
            <span class="pip"></span>
          </div>
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
        </div>
        <div class="sixth-face">
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
          <div class="column">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
          </div>
        </div>
      </div>
    </html>
    <style>
      /* 一 */
      .first-face { /* 形成上下左右居中 */
        display: flex;
        /* 项目在主轴上居中 */
        justify-content: center;
        /* 项目在交叉轴上居中 */
        align-items: center;
      }
      /* 二 */
      .second-face {
        display: flex;
        /* 两侧对齐 */
        justify-content: space-between;
      }
      .second-face .pip:nth-of-type(2) {
        /* 居下 */
        align-self: flex-end;
      }/* 三 */
      .third-face {
        display: flex;
        /* 两侧对齐 */
        justify-content: space-between;
      }
      .third-face .pip:nth-of-type(2) {
        /* 居中 */
        align-self: center;
      }
      .third-face .pip:nth-of-type(3) {
        /* 居下 */
        align-self: flex-end;
      }
      /* 四 、六*/
      .fourth-face,
      .sixth-face {
        display: flex;
        /* 两侧对齐 */
        justify-content: space-between;
      }
      .fourth-face .column,
      .sixth-face .column {
        display: flex;
        /* 纵向排列 */
        flex-direction: column;
        /* 两侧对齐 */
        justify-content: space-between;
      }
      /* 五 */
      .fifth-face {
        display: flex;
        /* 两侧对齐 */
        justify-content: space-between;
      }
      .fifth-face .column {
        display: flex;
        /* 纵向排列 */
        flex-direction: column;
        /* 两侧对齐 */
        justify-content: space-between;
      }
      .fifth-face .column:nth-of-type(2) {
        /* 居中对齐 */
        justify-content: center;
      }
    /* 基础样式 */
    .box2 {
      display: flex;
      /* 项目在交叉轴上居中 */
      align-items: center;
      /* 项目在主轴上居中 */
      justify-content: center;
      vertical-align: center;
      /* 允许项目换行 */
      flex-wrap: wrap;  /* 项目是多行时以交叉轴中心对齐 */
      align-content: center;
      font-family: 'Open Sans', sans-serif;
    }
    /* 类名包含face的元素 */
    [class$="face"] {
      margin: 5px;
      padding: 4px;  background-color: #e7e7e7;
      width: 104px;
      height: 104px;
      object-fit: contain;  box-shadow:
        inset 0 5px white,
        inset 0 -5px #bbb,
        inset 5px 0 #d7d7d7,
        inset -5px 0 #d7d7d7;  border-radius: 10%;
    }
    .pip {
      display: block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin: 4px;  background-color: #333;
      box-shadow: inset 0 3px #111, inset 0 -3px #555;
    }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

> 参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
> (opens new window)

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
flex布局案例-基础
flex布局案例-圣杯布局

← flex布局案例-基础 flex布局案例-圣杯布局→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式