利用flex实现骰子1-9点布局

最近学习了flex布局，利用它很轻松实现了1-9点骰子布局

html代码

css代码

.box{
		height:43px;
		width:43px;
		background: #fff;
		border:1px solid red;
		border-radius:5px;
		display: flex;
		padding:5px;
		float: left;
		margin-right:10px;
	}
	.box0{
		align-items: center;
		justify-content:center;
	}
	.item{
		background: #000;
		height: 10px;
		width: 10px;
		border-radius:50%;
		margin: 2px;
		box-sizing: border-box;
	}
	.box1{
		justify-content: space-between;
		align-items: center;
	}
	.box2{
		justify-content: space-between;
	}
	.box2 .item:nth-child(2){
		align-self:center;
	}
	.box2 .item:nth-child(3){
		align-self:flex-end;
	}
	.box3{
		flex-wrap: wrap;
	}
	.box3 .column{
		flex-basis: 100%;
		display: flex;
		justify-content: space-between;
	}
	.box3 .column:nth-child(2){
		justify-content: center;
	}
	.box4{
		flex-wrap:wrap;
		align-content: space-between;
	}
	.column{
		flex-basis:100%;
		display: flex;
		justify-content: space-between;
	}
	.box5{
		flex-wrap: wrap;
		align-content: space-between;
		flex-direction: column;
	}
	.box6{
		flex-wrap: wrap;
	}
	.row{
		flex-basis:100%;
		display: flex;
	}
	.row:nth-child(2){
		justify-content: center;
	}
	.row:nth-child(3){
		justify-content: space-between;
	}
	.box7{
		flex-wrap: wrap;
	}
	.box7 .row{
		flex-basis:100%;
		display: flex;
		justify-content: space-between;
	}
	.box8{
		flex-wrap: wrap;
	}