HTML+CSS代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<style type="text/css">
		.container .row{
			display: flex;
			margin-bottom: 10px;
		}
		.container .row .column{
			background: orange;
			height: 100px;
			margin-right: 10px;
			flex: 1;
			border-radius: 5px;
		}
		.container .row .column:nth-child(3n){
			margin-right: 0;	
		}
	</style>

</head>
<body> 
	<div class="container">
		<div class="row row01">
			<div class="column">1</div>
			<div class="column">2</div>
			<div class="column">3</div>
		</div>
		<div class="row row02">
			<div class="column">4</div>
			<div class="column">5</div>
			<div class="column">6</div>
		</div>
		<div class="row row03">
			<div class="column">7</div>
			<div class="column">8</div>
			<div class="column">9</div>
		</div>
	</div>

</body>
</html>

效果图:

九宫格布局-子客ZOG