<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.box1 div{
width: 30%;
height: 30%;
background-color: #000000;
border-radius: 50%;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
display: flex;
justify-content: space-evenly;
}
.box2 div{
width: 30%;
height: 30%;
background-color: #000000;
border-radius: 50%;
margin: 5px;
}
.box2 div:nth-of-type(2){
align-self: flex-end;
}
.box3{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box3 div{
width: 30%;
height: 30%;
background-color: #000000;
border-radius: 50%;
margin: 5px;
}
.box3 div:nth-of-type(1){
align-self: flex-start;
}
.box3 div:nth-of-type(3){
align-self: flex-end;
}
.box4{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
}
.box4 div{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box4 i{
display: block;
width: 30%;
height: 60%;
background-color: #000000;
border-radius: 50%;
margin: 5px;
}
.box5{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
}
.box5 div{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.box5 i{
display: block;
width: 30%;
height: 80%;
background-color: #000000;
border-radius: 50%;
margin: 5px;
}
.box5 div:nth-child(2){
align-items: center;justify-content: center;
}
.box6{
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
}
.box6 div{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.box6 i{
display: block;
width: 30%;
height: 80%;
background-color: #000000;
border-radius: 50%;
margin: 5px;
}
</style>
</head>
<body>
<div class="box1">
<div ></div>
</div>
<div class="box2">
<div ></div>
<div ></div>
</div>
<div class="box3">
<div ></div>
<div ></div>
<div ></div>
</div>
<div class="box4">
<div >
<i ></i>
<i ></i>
</div>
<div >
<i ></i>
<i ></i>
</div>
</div>
<div class="box5">
<div >
<i ></i>
<i ></i>
</div>
<div >
<i ></i>
</div>
<div >
<i ></i>
<i ></i>
</div>
</div>
<div class="box6">
<div >
<i ></i>
<i ></i>
</div>
<div >
<i ></i>
<i ></i>
</div>
<div >
<i ></i>
<i ></i>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=
阅读背景：
flex弹性布局制作骰子_lz5863139的博客
来源：互联网
分享到：
