【css常用布局】卡片布局（小白向）

说明：

本次布局需要先掌握flex布局

效果如图：

灰色的块就是一个一个的小卡片，把需要呈现的内容填充进去即可。

实现原理：

布局分析

html部分

<div class="wrap">
	<div class="card_wrap">
		<div class="card_item">
			<div class="card_content"></div>
		</div>
              // ...... 中间就省略了，想有多少卡片就复制多少
		<div class="card_item">
			<div class="card_content"></div>
		</div>
	</div>
</div>

css部分

<style type="text/css">
	.wrap { // 这个只是让整体在页面居中展示
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		padding: 8px;
	}
	
	.card_wrap { // 卡片容器
		display: flex;
		flex-wrap: wrap;
		width: 60%;
	}
	
	.card_item { // 每个卡片
		flex-basis: 25%;
		margin-bottom: 16px;
		padding: 0px 8px;
		box-sizing: border-box;
	}
	
	.card_content { // 卡片内容
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 2px;
		height: 80px;
		width: 100%;
	}
</style>

有更好的方法欢迎小伙伴补充讨论。