flex布局实现简易九宫格

直接上代码：

//HTML部分
	<div class="warp">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
//css部分
    <style>
		.warp{
            width: 600px;
            height: 600px;
            border: 1px solid gray;
            display: flex;
            justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
        }
        .item{
            width: 150px;
            height: 150px;
            background-color: green;
            font: 40px/150px '';
            flex-direction: column;
            text-align: center;
            margin: 0 20px;
        }
        .item:nth-child(2n){
            background-color: blue;
        }
    </style>