今天小编就按照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样式:
结尾
![](https://i-blog.csdnimg.cn/blog_migrate/e9e04131ce1aa27652ec0323b3c93bff.png)
今天针对骰子布局,讲解的比较细,导致篇幅比较长,内容不少,希望对大家对Flex布局有一定的了解。好了,今天的内容就到这里,大家看的应该也比较辛苦了。
未完
今天就到这里,下一篇网格布局