今天小编就按照Flex布局实战（一）中的场景顺序，通过思路+代码的方式来完成骰子布局。
骰子布局，是对Flex布局很好的诠释，对Flex布局中的容器和项目属性有较好的认识，如果对骰子布局能够独立完成，基本上就可以完成Flex布局在项目中的使用应该没有很大的问题了。
开始讲解骰子布局
首先先给大家说下大致的思想，作为后续代码讲解中能够理解。
先在html中定义一个class为container的div作为父容器
在此基础上，在container的div容器中，嵌入六个class为item的div元素作为六颗骰子。
第一步和第二步中就可以为容器和项目，如对容器和项目不能理解，可以看《认识Flex布局》的系列文章。
在第二步的基础上，分别完成骰子的点数效果，在此阶段中class为item的div就是容器，实现的骰子点数为对应的项目。
有了 上述的思路，我们开始实现骰子布局，其中第四步，在上面的描述中不够详细，在下面的实现中来讲解。
整体布局
先实现第一步和第二步的效果
实现的HTML和CSS样式：
对应的CSS样式：
骰子点数一
有了整体的布局，我们现在在此基础上，将点数一到点数六一一实现，现在先实现点数一。
骰子一的思想比较简单，现在将item的div都看成是一个容器，添加一个span标签来实现点数，需要将点数一居中，只需设置好容器在主轴和交叉轴上居中即可。
实现的HTML和CSS样式：
对应的CSS样式：
骰子点数二
骰子二的思想：先在item的div容器中添加两个span标签，作为两个点数。默认情况下，两个点数会按flex-direaction: row；排列。
所以考虑，如何将第二个点下移到右下角。需要使用项目属性align-self: flex-end;来实现。
好像看着不好看，所以对容器进行了设置justify-content: space-around;属性。现在应该可以了，看下面的效果和代码。
实现的HTML和CSS样式：
对应的CSS样式：
骰子点数三
骰子三的思想：先在item的div容器中添加三个span标签，作为三个点数。默认情况下，三个点数会按flex-direaction: row；排列。
现在需要考虑第二个点居中，第三个点在右下角。分别要对第二个和第三个项目进行属性设置。分别为align-self: center;和align-self: flex-end;
由于这样设置后就可以完成效果，就直接看下面的效果和代码。
实现的HTML和CSS样式：
对应的CSS样式：
骰子点数四
骰子四的思想：与前面三个点数的思想有些不一样，考虑到点数四是上下两个点数，所以我们就在item的div容器中，在添加两个div，对应的class为column，然后在column的div容器中分别添加两个span标签（column称为容器是针对span标签来说的）。
从布局来看，点数四已经出来，可不是这样显示，需要将后面两个点下移。于是设置item的div容器属性为flex-wrap: wrap; 效果如图：
只是效果不是很好，需要在横向上看，右边的点需要靠右边些，在纵向上来看，下面的点需要到底部。具体看下面的css代码实现。
实现的HTML和CSS样式：
对应的CSS样式：
骰子点数五
骰子五的思想：与点数四的思想有些一样，考虑到点数五是需要三行，所以我们就在item的div容器中，在添加三个div，对应的class为column，然后在上下两个column的div容器中分别添加两个span标签，中间的div中添加一个span标签（column称为容器是针对span标签来说的）。
从布局来看，点数五不是这样摆列的，需要将后面两个点下移，第三个点居中。于是设置item的div容器属性为flex-wrap: wrap; 效果如图：
咦，咋给容器设置个属性就正常了？哦，在点数四的时候，设置了column的容器了，所以....哈哈，就直接上图，看效果，上代码咯。
实现的HTML和CSS样式：
对应的CSS样式：
骰子点数六
骰子六的思想：其实和点数五的思想是一样的，不信？呵呵，那我们就不重复思想，直接上图来说明此观点。
哈哈，真的和点数五思想是一样的。于是考虑设置item的div容器属性为flex-wrap: wrap; 效果如图：
咦，是一样的，所以....哈哈，就不重复了，就直接上图，看效果，上代码咯。
实现的HTML和CSS样式：
对应的CSS样式：
结尾
今天针对骰子布局，讲解的比较细，导致篇幅比较长，内容不少，希望对大家对Flex布局有一定的了解。好了，今天的内容就到这里，大家看的应该也比较辛苦了。
未完
今天就到这里，下一篇网格布局
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
