Flex（骰子布局）
Posted 师兄白泽
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flex（骰子布局）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>骰子布局</title>
<style>
body {
margin: 10px 0 0 0;
display: flex;
justify-content: space-around;
}
body>div {
display: flex;
width: 100px;
height: 100px;
border-radius: 4px;
border: 2px solid red;
box-sizing: border-box;
}
p {
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
margin: 2px;
}
.div1 {
justify-content: center;
align-items: center;
}
/*todo:请补全剩余骰子布局代码*/
.div2{
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.div3{
justify-content: space-around;
}
.div3>p:nth-child(2){
align-self: center;
}
.div3>p:last-child{
align-self: flex-end;
}
.div4{
justify-content: space-around;
}
.div4>.col{
display: flex;
justify-content: space-around;
flex-direction: column;
}
.div5{
justify-content: space-around;
flex-direction: column;
}
.div5>.col{
display: flex;
justify-content: space-around;
}
.div6{
justify-content: space-around;
flex-direction: column;
}
.div6>.col{
display: flex;
justify-content: space-around;
}
.div7{
flex-direction: column;
justify-content: space-around;
}
.div7>.col{
display: flex;
justify-content: space-around;
}
.div8{
justify-content: space-around;
flex-direction: column;
}
.div8>.col{
display: flex;
justify-content: space-between;
/* flex-direction: column; */
}
.div9{
justify-content: space-around;
}
.div9>.col{
display: flex;
justify-content: space-around;
flex-direction: column;
}
</style>
</head>
<body>
<!--骰子1-->
<div class="div1">
<p></p>
</div>
<!--骰子2-->
<div class="div2">
<p></p>
<p></p>
</div>
<!--骰子3-->
<div class="div3">
<p></p>
<p></p>
<p></p>
</div>
<!--骰子4-->
<div class="div4">
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
</div>
<!--骰子5-->
<div class="div5">
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
</div>
<!--骰子6-->
<div class="div6">
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
</div>
<!--骰子7-->
<div class="div7">
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子8-->
<div class="div8">
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子9-->
<div class="div9">
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
以上是关于Flex（骰子布局）的主要内容，如果未能解决你的问题，请参考以下文章