flex布局之 5个div盒子位置的排列

、

 

直接上图   前三个盒子用felx布局

最后一个盒子用定位 过去

代码如下

.box{
		width: 800px;
		height: 600px;
		border: 1px solid purple;
		display: flex;
		flex-direction: row; 
		justify-content: space; 
		flex-wrap: wrap;
		align-content:center;
		position: relative;
	}
	.box div{
		width: 45%;
		height: 100px;
		margin: 20px;
	}
	.one1{
		flex: 30%;
	}
	.one2{
		
		flex: 30%;
		justify-content:flex-end;
	}
	.one3{
		flex: 50%;
		
	}
	.one5{
		width: 300px;
		position: absolute;
		bottom: 90px;
		left: 400px;
	}




<div class="box">
		<div class="one1" style="background-color: pink;">21</div>
		<div class="one2" style="background-color: cyan;">2</div>
		<div class="one3" style="background-color: #000;">3</div>
		<div class="one4" style="background-color: yellow;">4</div>
		<div class="one5" style="background-color: blue;">5</div>
	</div>