弹性盒模型筛子

在这里插入代码片
```	<div class="nav1">
			<div></div>
		</div>
		<div class="nav2">
			<div></div>
			<div></div>
		</div>
		<div class="nav3">
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="nav4">
			<div>
			<div></div>
			<div></div>
			</div>
			<div>
			<div></div>
			<div></div>
			</div>
		</div>
		<div class="nav5">
			<div>
				<div></div>
				<div></div>
			</div>
			<div class="az">
				<div></div>
			</div>
			<div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div class="nav6">
			<div>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div class="nav7">
			<div class="box1">
				<div></div>
				<div></div>
			</div>
			<div class="box">
			
				<div></div>
			</div>
			<div class="box2">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	*{
	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;
}