flex弹性盒子做骰子详解

什么是flex

网页布局是css的一个重点应用。
我们传统的布局的解决方案是基于盒装模型，依赖display属性+position属性+float属性。而这种布局相对来说不是很方便，类似垂直居中就不容易实现。
2009年，W3C提出了一种新的方案----flex布局，可以简便、完整、响应式地实现各种浏览器的支持，这就意味着，现在能很安全的使用这项功能。

弹性盒子来制作骰子

做出来的效果就是这样的
那么我们该如何用弹性布局来实现呢

首先我们要了解弹性盒子使用流程

1. 首先我们要定义一个弹性盒子

display：flex；

3. 确定方向

flex-direction：row/column(reverse);
/*row横轴方向默认方向  column竖轴方向*/

4. 主轴的对齐方式

	justify-content: flex-start;
    /* 左对齐 */
    justify-content: flex-end;
    /* 右对齐 */
    justify-content: center;
    /* 居中对齐 */
    justify-content: space-around;
    /* 两端对齐，两端有间距 */