前言
我们都知道骰(tou)子有六个面,点数1-6,本文将用C3弹性盒子实现这种骰子布局,具体怎么实现呢,Let’s do it!
整体就从1-6点逐一实现
先看一下HTML代码 如下:
1 | <div class="dice"> |
单面1实现
样式代码如下:
1 | .dice{ |
单面2实现
样式代码如下:
1 | .dice{ |
单面3实现
样式代码如下:
1 | .dice{ |
单面4实现
样式代码如下:
1 | .dice{ |
单面5实现
html代码如下:
1 | <div class="dice"> |
样式代码如下:
1 | .dice{ |
单面6实现
样式代码如下:
1 | .dice{ |
总结
C3Flex布局,用着挺舒服的,上文写的骰子这几种排列方式基本上涵盖了Flex常见的应用场景,为了表达的更明了,代码写的比较冗余,具体应用场景可斟酌使用。
注:本文参考 阮一峰 大神的 Flex布局教程:实例篇 有兴趣的小伙伴可以看看。