flex 布局写出麻将一到九筒

首先写公共样式

*{
   
    margin: 0px;
    padding: 0;
}
div{
   
    width: 200px;
    height: 250px;
    border: 1px solid red;
    display: flex; 
    float: left;
    padding: 20px;
}
p{
   
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: black;
}

	一筒
	<div class="DivOne">
			<p class="Pone"></p>	
	</div>

.DivOne{
   
    justify-content: center; /* 主轴对齐方式 */
    align-items: center;     /* 副轴对齐方式 */
    
}

	二筒
	<div class="Divtwo">
			<p class="Ptwo"></p>
			<p class="Ptwo"></p>
	</div>

.Divtwo{
   
flex-direction: column;
justify-content: center;
align-items: center;
}
.Ptwo{
   
    margin-top: 12px;
}

	三筒
	<div