Flex布局实战篇

说在前面的话，实战案例来源于阮一峰老师的博客，上一篇总结了阮老师的Flex布局语法，本篇主要是实战。

啊啊，本来想在gitHub上创建的，想想太麻烦，而且代码量并不多，就算了，先在博客上整理一遍吧。

因为阮老师代码给的不全（当然给的都是重点！），所以我贴出了完整的代码（请不要纠结细节），就厚着脸皮戳了原创标签哈哈哈哈哈哈。。。

欢迎各位指正不当之处。

阮老师Flex布局语法篇：戳这里

阮老师Flex布局实战篇：戳这里

1.骰子的布局

总效果图：

HTML代码（body主体部分）：

<!-- 单点骰子 -->
		<div class="box box11">
			<span class="item"></span><!--[0,0]-->
		</div>
		<div class="box box12">
			<span class="item"></span><!--[0,1]-->
		</div>
		<div class="box box13">
			<span class="item"></span><!--[0,2]-->
		</div>
		<div class="box box14">
			<span class="item"></span><!--[1,0]-->
		</div>
		<div class="box box15">
			<span class="item"></span><!--[1,1]-->
		</div>
		<div class="box box16">
			<span class="item"></span><!--[1,2]-->
		</div>
		<div class="box box17">
			<span class="item"></span><!--[2,0]-->
		</div>
		<div class="box box18">
			<span class="item"></span><!--[2,1]-->
		</div>
		<div class="box box19">
			<span class="item"></span><!--[2,2]-->
		</div>
	<!-- 两点骰子 -->
		<div class="box box21">
			<span class="item"></span><!--[0,0]，[0,2]-->
			<span class="item"></span>
		</div>
		<div class="box box22">
			<span class="item"></span><!--[0,0],[2,0]-->
			<span class="item"></span>
		</div>
		<div class="box box23">
			<span class="item"></span><!--[0,1],[2,1]-->
			<span class="