dice.scss
.main {
width: 100%;
height: 100%;
display: flex;
-webkit-display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
// justify-content: center;
vertical-align: center;
flex-wrap: wrap;
align-content: center;
height: 800px;
font-family: 'Open Sans', sans-serif;
background: linear-gradient(to top, #222, #333);
.item {
background-color: #e7e7e7;
box-shadow:
inset 0 5px white,
inset 0 -5px #bbb,
inset 5px 0 #d7d7d7,
inset -5px 0 #d7d7d7;
border-radius: 10%;
height: 100px;
width: 100px;
padding:2px;
// border: 1px solid red;
.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.center {
flex-basis: 100%;
display: flex;
justify-content: center;
}
.spot {
width: 24px;
height: 24px;
border-radius: 50%;
margin: 4px;
background-color: #333;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
}
.first {
display: flex;
align-items: center;
justify-content: center;
align-content: space-around;
}
.second {
display: flex;
flex-direction: column;
justify-content: space-between;
.spot:nth-child(2) {
align-self: flex-end;
}
}
.third {
display: flex;
flex-direction: column;
justify-content: space-between;
.spot:nth-child(2) {
align-self: center;
}
.spot:nth-child(3) {
align-self: flex-end;
}
}
.forth {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.ninth {
display: flex;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-between;
}
}
編譯出 dice.css
sass dice.scss dice.css
dice.html
<!--
* @Author: jinbo.ma
* @Mail: [email protected]
* @Date: 2020-06-09 15:23:59
* @LastEditTime: 2020-06-09 15:33:27
* @FilePath: /react/src/dice.html
* @Description: file content
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>index html</title>
<link rel="stylesheet" href="dice.css" />
</head>
<body>
<!-- 創建容器 -->
<div class="main">
<div class="item first">
<div class="spot"></div>
</div>
<div class="item second">
<div class="spot"></div>
<div class="spot"></div>
</div>
<div class="item third">
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
</div>
<div class="item forth">
<div class="column">
<div class="spot"></div>
<div class="spot"></div>
</div>
<div class="column">
<div class="spot"></div>
<div class="spot"></div>
</div>
</div>
<div class="item">
<div class="column">
<div class="spot"></div>
<div class="spot"></div>
</div>
<div class="center">
<div class="spot"></div>
</div>
<div class="column">
<div class="spot"></div>
<div class="spot"></div>
</div>
</div>
<div class="item">
<div class="column">
<div class="spot"></div>
<div class="spot"></div>
</div>
<div class="column">
<div class="spot"></div>
<div class="spot"></div>
</div>
<div class="column">
<div class="spot"></div>
<div class="spot"></div>
</div>
</div>
<div class="item ninth">
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
<div class="spot"></div>
</div>
</div>
</body>
</html>
最終結果：
推薦參考文章
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html