您现在的位置是：网站首页> 编程资料编程资料

CSS3的Flexbox骰子布局的实现及问题讲解利用CSS3的flexbox实现水平垂直居中与三列等高布局基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css3弹性盒模型（Flexbox）详细介绍CSS3 Flexbox中flex-shrink属性的用法示例介绍10分钟理解CSS3 FlexBox弹性布局

2023-10-22 287人已围观

简介 骰子布局顾名思义,就是好比骰子的一面最多可以放置9个点,而每个面放置的点数正好就是一个布局的模型图,这里我们就带来CSS3的Flexbox骰子布局的实现及问题讲解:

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

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

CSS Code复制内容到剪贴板
  1.  "01" class="face-01">   
  2.   "dot">   
  3.     
  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.   "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.   margin: 10px;   
    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

    上一篇：浅谈HTML（css基础样式）html/css基础篇——html代码编写过程中的几个警惕点(必看)html、css基础注意点(前端必看篇)HTML CSS样式基础(必看篇)HTML基础总结推荐(段落)HTML基础知识——css样式表,样式属性,格式与布局详解HTML基础知识——设置超链接的样式简单实例HTML基础必看——全面了解css样式表HTML基础必看---表单,图片热点,网页划区和拼接详解HTML基础重点_一般标签、常用标签和表格前端开发每天必学之HTML入门介绍

    下一篇：CSS隐藏页面文字的几种方式总结CSS隐藏文字的6种方法深入分析网页CSS隐藏文字和以图换字技术-CSS教程-网页制作-网页教学网CSS实现在文章每段后面加入带连接的隐藏文字-CSS教程-网页制作-网页教CSS教程:text-indent隐藏文字出现虚线框outline-CSS教程-网页制作-网页

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    • -六神源码网