<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bg{
width: 300px;
height: 300px;
background-color: #000;
padding-top: 50px;;
}
.item{
display: block;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 10px;
}
.box{
width: 105px;
height: 105px;
background-color: rgb(231,231,231);
margin: 0 50px;
border-radius: 20px;
padding: 5px 5px;
border: 6px solid rgb(215,215,215);
/*一点*/
/*display: flex;*/ /*默认项目主轴对齐方式为左对齐 flex-start*/
/*justify-content: flex-end;*/ /*设置项目主轴对齐方式为右对齐*/
/*justify-content: center;*/ /*设置项目主轴对齐方式为居中对齐*/
/*align-items: flex-start; */ /*设置项目交叉轴对齐方式为上对齐*/
/*align-items: flex-end; */ /*设置项目交叉轴对齐方式为下对齐*/
/*align-items: center;*/ /*设置项目交叉轴对齐方式为居中对齐*/
/*二点*/
/*display: flex;*/
/*justify-content: space-between;*/
/*三点*/
/*display: flex;
justify-content: space-between;*/
/*四点*/
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/*二点*/
/*.item:nth-child(2){*/
/*align-self: flex-end; */ /*这个属性是用来定义单个元素*/
/*}*/
/*三点*/
/*.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}*/
/*四、五、六、七、八、九点*/
.column{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.column:nth-child(2){
justify-content: center;
margin-top: -20px;
}
.column:nth-child(3){
justify-content: flex-end;
margin-top: -20px;
}
.column:nth-child(5){
align-self: flex-end;
}
.column:nth-child(4){
align-self: center;
/*justify-content: center;*/
}
</style>
</head>
<body>
<div class="bg">
<div class="box">
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div>
</body>
</html>
