弹性盒模型筛子

在这里插入代码片
```	

			

		
		

			

			

		
		

			

			

			

		
		

			

			

			

			
			

			

			

			
		
		

			

				

				

			
			

				

			
			

				

				

			
		
		

			

				

				

				

			
			

				

				

				

			
		
		

			

				

				

			
			

			
				

			
			

				

				

				

			
		
	*{
	margin: 0;
	padding: 0;
}
html body>div{
	background-color: #ccffff;
	border: 0!important;
	margin-top: 10px;
}

.nav1{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	justify-content: center;
}
.nav1 div{
	width: 50px;
	height: 50px;
	background: #cc3333;
	border-radius:50%;
	align-self: center;
}
.nav2{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	justify-content: space-between;
	justify-content: space-around;
}
.nav2 div{
	width: 50px;
	height: 50px;
	background: red;
	border-radius:50%;
	
}
.nav2 div{
	align-self: center;
}
.nav2 div:last-child{
	/*align-self: flex-end;*/
}
.nav3{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	justify-content: space-around;
	align-self: center;
}
.nav3 div{
	width: 50px;
	height: 50px;
	background: red;
	border-radius:50%;
	align-self: center;
}
.nav3 div:first-child{
	align-self: stretch;
}
.nav3 div:last-child{
	align-self: flex-end;
}
.nav4{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	justify-content: space-between;
	
}
.nav4>div{
	display: flex;
	flex-direction: column;
		justify-content: space-between;
}
.nav4>div div{
	width: 50px;
	height: 50px;
	background: red;
	border-radius:50%;
	
}


.nav5{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	justify-content: space-between;
	
}
.nav5>div{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.nav5>div div{
	width: 50px;
	height: 50px;
	background: red;
	border-radius:50%;
}

.nav6{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	justify-content: space-around;
	
}
.nav6>div{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.nav6>div div{
	width: 50px;
	height: 50px;
	background: red;
	border-radius:50%;
}

.nav7{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.nav7>div{
	
	display: flex;
	/*flex-direction: column;*/
	
}
.nav7>div div{
	width: 50px;
	height: 50px;
	background: red;
	border-radius:50%;

}
.box1,.box2{
	justify-content: space-between;
}
.nav7>div:nth-of-type(2){
	justify-content: center;
}