CSS3的Flexbox骰子布局的如何实现及问题讲解

互联网
我赞美你品格高尚，崇敬你洁白无瑕。我爱你、想你、盼你，像对每一个季节那样。我爱你、想你、盼你，不管世俗的偏见怎样厉害。冬――四季之一的冬，你来吧！我喜欢你纯净的身躯，喜欢你严厉的性格，我要在你的怀抱中锻炼、奋斗、成熟……你可以和春天的万花，夏天的麦浪，秋天的瓜果……比美！

本文中只是熟悉基本属性的用法，并完成一组骰子各个面的制作。在下面的内容我不会涉及flexbox一些比较棘手的问题，比如旧版本语法、供应商前缀、浏览器怪癖等：

一、First Face
我们知道，骰子有六个面，每个面的点的个数代表该面的值，第一个面由一个水平垂直居中的点组成。下面来看具体的实现：

CSS Code复制内容到剪贴板
  1. <sectionname="01"class="face-01">
  2. <spanclass="dot"></span>
  3. </section>
  4. face-01{
  5. display:flex;
  6. justify-content:center;
  7. align-items:center;

关于justify-content和align-items的用法请参考这里justify-content，align-items。使用flexbox，垂直居中两行属性就可以搞定，很easy!

二、Second Face

CSS Code复制内容到剪贴板
  1. .face-02{
  2. display:flex;
  3. justify-content:space-between;
  4. }
  5. .face-02.dot:nth-of-type(2){
  6. align-self:flex-end;
  7. }
  8. <sectionname="02"class="face-02">
  9. <spanclass="dot"></span>
  10. <spanclass="dot"></span>
  11. </section>

这里我们不能使用align-items属性，使用它两个点都会受影响，flexbox提供了一个align-self属性，这个属性可以让我们更方便的控制flex items的各项沿着cross axias方向，设置不同的布局。align-self的用法参考这里align-self。

三、Third Face

CSS Code复制内容到剪贴板
  1. .face-03{
  2. display:flex;
  3. justify-content:space-between;
  4. }
  5. .face-03.dot:nth-of-type(2){
  6. align-self:center;
  7. }
  8. .face-03.dot:nth-of-type(3){
  9. align-self:flex-end;
  10. }
  11. <sectionname="03"class="face-03">
  12. <spanclass="dot"></span>
  13. <spanclass="dot"></span>
  14. <spanclass="dot"></span>
  15. </section>

该face与second face 使用的属性相同，不再解释。

四、Fourth Face

CSS Code复制内容到剪贴板
  1. .face-04{
  2. display:flex;
  3. justify-content:space-between;
  4. flex-direction:column;
  5. }
  6. .face-04.column{
  7. display:flex;
  8. justify-content:space-between;
  9. }
  10. <sectionname="04"class="face-04">
  11. <divclass="column">
  12. <spanclass="dot"></span>
  13. <spanclass="dot"></span>
  14. </div>
  15. <divclass="column">
  16. <spanclass="dot"></span>
  17. <spanclass="dot"></span>
  18. </div>
  19. </section>

本例中使用了flex-direction，从字面意思可以看出，是用来控制flex的方向，即按列还是按行来布局，该属性更详细的用法可以参考这里flex-direction

后面Fifth Face 和 Sixth Face,根据前面的布局思想，就很easy了不再赘述！

写到此，想想配合JS写一个玩骰子的小游戏应该很easy了吧。

五、实现1,2,3,4,6,12等份

CSS Code复制内容到剪贴板
  1. .row{
  2. display:flex;
  3. box-sizing:border-box;
  4. }
  6. .column{
  7. margin:10px;
  8. flex-grow:1;
  9. flex-shrink:1;
  10. flex-basis:0;
  11. box-sizing:border-box;
  12. }
  13. <sectionclass="row">
  14. <divclass="column">One</div>
  15. </section>
  16. <sectionclass="row">
  17. <divclass="column">OneHalf</div>
  18. <divclass="column">OneHalf</div>
  19. </section>
  20. <sectionclass="row">
  21. <divclass="column">OneThird</div>
  22. <divclass="column">OneThird</div>
  23. <divclass="column">OneThird</div>
  24. </section>
  25. <sectionclass="row">
  26. <divclass="column">OneFourth</div>
  27. <divclass="column">OneFourth</div>
  28. <divclass="column">OneFourth</div>
  29. <divclass="column">OneFourth</div>
  30. </section>
  31. <sectionclass="row">
  32. <divclass="column">OneSixth</div>
  33. <divclass="column">OneSixth</div>
  34. <divclass="column">OneSixth</div>
  35. <divclass="column">OneSixth</div>
  36. <divclass="column">OneSixth</div>
  37. <divclass="column">OneSixth</div>
  38. </section>
  39. <sectionclass="row">
  40. <divclass="column">OneTwelve</div>
  41. <divclass="column">OneTwelve</div>
  42. <divclass="column">OneTwelve</div>
  43. <divclass="column">OneTwelve</div>
  44. <divclass="column">OneTwelve</div>
  45. <divclass="column">OneTwelve</div>
  46. <divclass="column">OneTwelve</div>
  47. <divclass="column">OneTwelve</div>
  48. <divclass="column">OneTwelve</div>
  49. <divclass="column">OneTwelve</div>
  50. <divclass="column">OneTwelve</div>
  51. <divclass="column">OneTwelve</div>
  52. </section>

在本例中用到了flex-grow,flex-shrink,flex-basis三个属性。
1. flex-grow：根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
如果所有伸缩项目的“flex-grow”设置了“1”，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。负值无效。
2. flex-shrink：根据需要用来定义伸缩项目收缩的能力。负值同样无效。
3. flex-basis： 用来设置伸缩基准值，剩余的空间按比率进行伸缩，不支持负值。如果设置为0，围绕内容的额外的空间不会考虑在内。如果设置为auto，额外的空间是基于flex-grow的值分配。

六、实现2-3-7布局

CSS Code复制内容到剪贴板
  1. .row237.column:first-of-type{
  2. flex-grow:2;
  3. flex-basis:5px;
  4. }
  5. .row237.column:nth-of-type(2){
  6. flex-grow:3;
  7. flex-basis:18px;
  8. }
  9. .row237.column:nth-of-type(3){
  10. flex-grow:7;
  11. flex-basis:70.5px;
  12. }
  14. <sectionclass="rowrow237">
  15. <divclass="column">OneHalf</div>
  16. <divclass="column">OneThird</div>
  17. <divclass="column">OneSeventh</div>
  18. </section>

此处各项flex-basis的值的计算，应该有个公式(待解决)，如果有这个公式，配合sass，less等预处理语言实现多列自适应布局将会很方便。

到此这篇关于CSS3的Flexbox骰子布局的如何实现及问题讲解就介绍到这了。人生之路上，永远没有后悔药可以买。我们无法回到过去，那就更加应该把握住现在，而不让将来的我们为现在而后悔。更多相关CSS3的Flexbox骰子布局的如何实现及问题讲解内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例