html5弹性盒做成骰子,使用CSS3弹性布局实现的6只骰子

CSS

语言：

CSSSCSS

确定

.first-face {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.second-face {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.second-face .pip:nth-of-type(2) {

-webkit-align-self: flex-end;

-ms-flex-item-align: end;

align-self: flex-end;

}

.third-face {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.third-face .pip:nth-of-type(2) {

-webkit-align-self: center;

-ms-flex-item-align: center;

align-self: center;

}

.third-face .pip:nth-of-type(3) {

-webkit-align-self: flex-end;

-ms-flex-item-align: end;

align-self: flex-end;

}

.fourth-face,

.sixth-face {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.fourth-face .column,

.sixth-face .column {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.fifth-face {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.fifth-face .column {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

.fifth-face .column:nth-of-type(2) {

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

/* OTHER STYLES */

* {

box-sizing: border-box;

}

html,

body {

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

vertical-align: center;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

font-family: 'Open Sans', sans-serif;

background: -webkit-linear-gradient(top, #222, #333);

background: linear-gradient(top, #222, #333);

}

[class$="face"] {

margin: 16px;

padding: 4px;

background-color: #e7e7e7;

width: 104px;

height: 104px;

-o-object-fit: contain;

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;

}