flex两行两列布局，快速get

直接上代码

<div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
 </div>

.outer {
	    display: flex;
	    align-items: center;
	    flex-wrap: wrap; 			  // 多行显示
	    align-content: center;
	     width: 500px;
	    height: 500px;
	    background-color: purple;
}

.inner {
	    width: 45%;
	    height: 40%;
	    background-color: pink;
	    border: 1px solid black;
	    margin-bottom: 1px;
}