首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 16:03:49 CSS3   Flexbox   骰子布局"

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

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

CSS Code复制内容到剪贴板
  1.  "01" class="face-01">   
  2.   "dot">   
  3.     
  4. face-01 {   
  5. display: flex;   
  6. justify-contentcenter;   
  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.   "02" class="face-02">   
  9.    "dot">   
  10.    "dot">   
  11.     

这里我们不能使用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. "03" class="face-03">   
  12.  "dot">   
  13.  "dot">   
  14.  "dot">   
  15.   

该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. "04" class="face-04">   
  11.   "column">   
  12.     "dot">   
  13.     "dot">   
  14.   
  
  •   "column">   
  •     "dot">   
  •     "dot">   
  •   
  •   
  •   
  • 本例中使用了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. }   
    5.   
    6. .column {   
    7.   margin10px;   
    8.   flex-grow: 1;   
    9.   flex-shrink: 1;   
    10.   flex-basis: 0;   
    11.   box-sizing: border-box;   
    12. }   
    13. "row">   
    14.   "column">One
      
  •   
  • "row">   
  •   "column">One Half
  •   
  •   "column">One Half
  •   
  •   
  • "row">   
  •   "column">One Third   
  •   "column">One Third   
  •   "column">One Third   
  •   
  • "row">   
  •   "column">One Fourth   
  •   "column">One Fourth   
  •   "column">One Fourth   
  •   "column">One Fourth   
  •   
  • "row">   
  •   "column">One Sixth   
  •   "column">One Sixth   
  •   "column">One Sixth   
  •   "column">One Sixth   
  •   "column">One Sixth   
  •   "column">One Sixth   
  •   
  • "row">   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   "column">One Twelve   
  •   
  • 2016627110435616.png (907×374)

    在本例中用到了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. }   
    13.   
    14. "row row237">   
    15.   "column">One Half   
    16.   "column">One Third   
    17.   "column">One Seventh   
    18.   

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

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/CSS/77794.html

    上一篇 : 解析CSS中的伪元素及其与伪类的区别
    下一篇 : 浅谈HTML(css基础样式)
    留言与评论(共有 0 条评论)
       
    验证码:

    热门文章

    最近发表

    标签列表

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持