大屏-flex布局

<div class="container">
			<div class="title">标题</div>
				<div class="content">
					<div class="item">
					</div>
					<div class="item" style="width: calc((100% - 30) / 3 * 2)">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
					<div class="item">
					</div>
				</div>
			</div>
		</div>

html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		.container{
			width: 100%;
			height: 100%;
		}
		.title{
			text-align: center;
			width:100%;
			height: 50px;
			line-height: 50px;
			background-color: #ccc;
			color: #fff;
		}
		.content{
			width: 100%;
			height: calc(100% - 50px);
			background-color: #fff;
			padding: 5px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
		}
		.item{
			flex: 1;
			width: calc((100% - 30px) / 3);
			min-width: calc((100% - 30px) / 3);
			max-width: calc((100% - 30px) / 3);
			background-color: #ccc;
			margin: 5px;
			height: 300px;
		}