弹性布局(Flex)+骰子旋转实例^v^ - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


弹性布局(Flex)+骰子旋转实例^v^

2020-2-16 释然 前端及开发文章及欣赏


弹性布局(Flex)
随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中。
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
下面是一些弹性布局的基本语法:
两部分:

1. 语法是添加到父容器上的
        display : flex;(弹性盒子的标志哦!!!)
        flex-direction: row; 布局的排列方向 (主轴排列方向)
             row 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。
             row-reverse  显示为行。但方向和row属性值是反的
             column  显示为列
             column-reverse 显示为列。但方向和column属性值是反的
        flex-wrap : nowrap; 是否进行换行处理。
             nowrap; 默认值,不换行处理
             wrap; 换行处理
             wrap-reverse; 反向换行
        flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
        justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。  
            flex-start : 子项都去起始位置对齐。
            flex-end : 子项都去结束位置对齐。
            center : 子项都去中心位置对齐。
            space-between : 表现为两端对齐。多余的空白间距在元素中间区域分配,两边没宽。 
            space-around : 边缘两侧的空白只有中间空白宽度一半即每个块都有左右间距。
            space-evenly :每个flex子项两侧空白间距完全相等。
        align-items : 每一行中的子元素上下对齐方式。
            stretch;默认值,flex子项拉伸
            flex-start;容器顶部对齐
            center;容器居中对齐
            flex-end;容器底部对齐
        align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果,因为他是多行的一个上下对齐方式)
            默认:多行下,有几行就会把容器划分为几部分,默认就是stretch拉伸的。
            值跟justify-content取值是相同的。

2. 语法是添加到子容器上的?
        order : 排序(值越大越后)
            0:默认值      eg:1234
            1:放在后面    eg:1342
            -2:放在前面   eg:2134
        flex-grow : 扩展 ( 想看到扩展的效果,必须有空隙 )
            0 : 默认值 , 不去扩展
            0.5:占空隙的一半
            1 : 去扩展 , 会把空白区域全部沾满
         ( 注:子元素会按照设置的比例值来分配空隙,如果比例值总和小于1,那么会有空隙,如果比例值总和大于等于1,那么就没有空隙。)
        flex-shrink : 收缩
            正常默认值是1
            0表示不收缩,.5收缩小一些,2收缩大一些。(大小是跟正常缩放1进行比较的)
        flex-basis : 跟flex-shrink/flex-grow很像。
            flex-shrink/flex-grow是设置一个比例值,flex-basis是设置一个具体值。
        flex : 一种复合写法
            flex-grow  flex-shrink  flex-basis
            flex:1;
                flex : 1 1 0    
            flex:0;
                flex : 0 1 0
        algin-self: 跟align-items操作很像,区别就是只是针对某一个子项。
            

注:默认情况下,在弹性盒子中的子元素的左右排列的。
注:
    水平是主轴的时候:默认情况下,当宽高不写的时候,宽度由内容决定,高度由父容器决定。
    垂直是主轴的时候:默认情况下,当宽高不写的时候,宽度由父容器决定,高度由内容决定。

注:当子项的总宽度大于父容器的时候,会自动收缩的(弹性的优先级是大于自身固定大小的)
注:当子项的内容已经达到了父容器最小宽高的时候,就会出现溢出的现象。

注:弹性布局中用的频率比较多的语法:
    display : flex;
    flex-direction;
    justify-content;
    align-items;
    flex;

注:弹性布局的优势是做一维布局,网格布局的优势是做二维布局。

下面是弹性布局骰子案例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        a{text-decoration: none;}
        img{display: block;}

        .box1{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;justify-content: center;align-items: center;}
        .box1 div{width: 30px;height: 30px;border-radius:50%;background: black;}

        .box2{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
        .box2 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
        .box2 div:nth-of-type(1){align-self: flex-start;}
        .box2 div:nth-of-type(2){align-self: flex-end;}

        .box3{width: 150px;height: 150px;display: flex;border: 1px black solid;margin: 20px auto;border-radius: 10px;align-items: center;justify-content: space-between;}
        .box3 div{width: 30px;height: 30px;border-radius:50%;background: black;margin: 10px;}
        .box3 div:nth-of-type(1){align-self: flex-start;}
        .box3 div:nth-of-type(3){align-self: flex-end;}

        .box4{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box4 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box4 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        .box5{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box5 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box5 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        .box6{width: 150px;height: 150px;border: 1px black solid;margin: 20px auto;border-radius: 10px;display: flex;flex-direction: column;}
        .box6 div{height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
        .box6 div li{display: block; width: 30px;height: 30px;border-radius:50%;background: black;}

        #box{width: 400px;height: 400px;margin: 20px auto;border: 1px springgreen solid; 
        perspective: 500px;perspective-origin: right top;}
        #box .main{position: relative;width: 150px;height: 150px;margin: 125px;
        transform-style: preserve-3d;transition: 4s;transform-origin: center center -50px;}
        #box .main .box1{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;}
        #box .main .box2{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;left: 150px;transform-origin:left; transform:rotateY(90deg);}
        #box .main .box3{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;left: -150px;transform-origin:right; transform:rotateY(-90deg);}
        #box .main .box4{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;top: -150px;transform-origin:bottom; transform:rotateX(90deg);}
        #box .main .box5{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;top: 150px;transform-origin:top; transform:rotateX(-90deg);}
        #box .main .box6{position: absolute;background:limegreen;left: 0;top: 0;
        width: 150px;height: 150px;transform:translateZ(-150px) rotateY(180deg);}

        #box:hover .main{transform:rotateY(360deg);}
    </style>
</head>
<body>
    <div id="box">
        <div class="main">
            <div class="box1">
                <div></div>
            </div>
            <div class="box2">
                <div></div>
                <div></div>
            </div>
            <div class="box3">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box4">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
            <div class="box5">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
            <div class="box6">
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
                <div>
                    <li></li>
                    <li></li>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


标签: 弹性布局(Flex)+骰子旋转实例^v^ « 数据可视化大屏-城市生态环境 | vue-router学习笔记»


蓝蓝 http://www.bjhbys.com

  1. 2020年3月(29)
  2. 2020年2月(60)
  3. 2020年1月(32)
  4. 2019年12月(50)
  5. 2019年11月(61)
  6. 帝皇彩票官网2019年10月(49)
  7. 2019年9月(48)
  8. 2019年8月(58)
  9. 帝皇彩票官网2019年7月(58)
  10. 2019年6月(58)
  11. 2019年5月(31)
  12. 2019年4月(37)
  13. 2019年3月(43)
  14. 2019年2月(25)
  15. 2019年1月(45)
  16. 2018年12月(41)
  17. 2018年11月(40)
  18. 2018年10月(29)
  19. 帝皇彩票官网2018年9月(40)
  20. 2018年8月(87)
  21. 2018年7月(107)
  22. 2018年6月(86)
  23. 2018年5月(110)
  24. 2018年4月(40)
  25. 2018年3月(35)
  26. 2017年8月(35)
  27. 2017年7月(45)
  28. 2017年6月(7)
  29. 2017年5月(27)
  30. 2017年4月(51)
  31. 2017年3月(70)
  32. 2017年2月(65)
  33. 2017年1月(69)
  34. 帝皇彩票官网2016年12月(55)
  35. 2016年11月(111)
  36. 帝皇彩票官网2016年10月(92)
  37. 2016年9月(53)
  38. 2016年8月(9)
  39. 2016年7月(4)
  40. 2016年6月(9)
  41. 2016年3月(19)
  42. 2016年2月(26)
  43. 2016年1月(30)
  44. 2015年12月(33)
  45. 2015年11月(35)
  46. 2015年10月(46)
  47. 2015年9月(43)
  48. 2015年8月(40)
  49. 2015年7月(33)
  50. 2015年6月(46)
  51. 2015年5月(58)
  52. 2015年4月(70)
  53. 2015年3月(55)
  54. 帝皇彩票官网2015年2月(17)
  55. 2015年1月(33)
  56. 2014年12月(21)
  57. 2014年11月(84)
  58. 2014年10月(94)
  59. 2014年9月(6)
  60. 2014年8月(1)
  61. 2014年7月(13)
  62. 2014年6月(66)
  63. 2014年5月(99)
  64. 2014年4月(88)
  65. 2014年3月(102)
  66. 2014年2月(68)
  67. 2014年1月(83)
  68. 2013年12月(106)
  69. 2013年11月(112)
  70. 2013年10月(61)
  71. 2013年9月(20)
  72. 2013年7月(13)
  73. 2013年6月(27)
  74. 2013年5月(48)
  75. 2013年4月(39)
  76. 2013年3月(8)
  77. 2013年2月(20)
  78. 2013年1月(31)
  79. 2012年12月(33)
  80. 2012年11月(31)
  81. 2012年10月(23)
  82. 2012年9月(8)
  83. 2012年7月(14)
  84. 2012年6月(15)
  85. 2012年5月(31)
  86. 2012年4月(24)
  87. 2012年2月(4)
  88. 2012年1月(8)
  89. 2011年12月(35)
  90. 2011年11月(32)
  91. 2011年10月(13)
  92. 2011年8月(1)
  93. 2011年6月(1)
订阅Rss
大象彩票计划 大象彩票计划 迪士尼彩乐园开户 桔子彩票官网 状元彩票官网 pk10机器人 帝皇彩票开奖 吉利彩票导航 乐彩网导航 大象彩票APP