活学活用flex制骰子

Posted 阿沫夕霖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了活学活用flex制骰子相关的知识,希望对你有一定的参考价值。

flex弹性布局制骰子

效果展示:

代码如下:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    <style type="text/css">
#bg
    height: 400px;
    display: inline-flex; /*宽度根据容器元素进行自适应*/

 
.dice-base
    width: 100px;
    height: 100px;
    border: 2px solid black;
    margin-right: 10px;
    display: flex; /*flex布局*/
    border-radius: 10%;

 
/*first dice*/
.dice-1
    margin-left: 10px;
    justify-content: center; /*可以使子元素水平居中*/

.one
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%; /*画圆*/
    align-self: center; /*使自己在垂直方向居中*/

 
/*second dice*/
.dice-2
    justify-content: space-between; /*使第一个元素左对齐,第二个元素右对齐*/ 

.two
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;

.two:nth-child(2) /*nth-child是选择器*/
    align-self: flex-end; /*使第二个元素自身在垂直方向上底边对齐*/

 
/*third dice*/
.dice-3
    justify-content: space-between; /*使第一个元素左对齐,最后一个元素右对齐*/ 

.three
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;

.three:nth-child(2)  
    align-self: center; /*使第二个元素自身在垂直方向上居中*/

.three:nth-child(3)   
    align-self: flex-end; /*使第二个元素自身在垂直方向上底边对齐*/

 
/*forth dice*/
.dice-4
    flex-wrap: wrap;  /*当子元素超过父元素时在下一行显示*/
    align-content: space-between; /*在垂直方向上两边对齐*/

.forth
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;

.forth:nth-child(1)
    margin-right: 40px; /*设置第一个元素右边距,使一行只放两个子元素*/

.forth:nth-child(3)
    margin-right: 40px;

 
/*five dice*/
.dice-5
    flex-wrap: wrap;  /*当子元素超过父元素时在下一行显示*/
    align-content: space-between; /*在垂直方向上两边对齐*/

.five
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;

.five:nth-child(1)
    margin-right: 40px; /*设置第一个元素右边距,使一行只放两个子元素*/

.five:nth-child(3)
    margin-right: 35px; 
    margin-left: 35px;

.five:nth-child(4)
    margin-right: 40px; 

 
/*six dice*/
.dice-6
    flex-wrap: wrap;  /*当子元素超过父元素时在下一行显示*/
    align-content: space-between; /*在垂直方向上两边对齐*/
    justify-content: space-between;/*在水平方向上两边对齐*/

.six
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;

</style>
</head>
 
<body>    
 
    <div id="bg">
        <!-- first dice  -->
        <div class="dice-base dice-1"> 
            <div class="one"></div>
        </div>
 
         <!-- second dice  -->
        <div class="dice-base dice-2">
           <div class="two"></div>
           <div class="two"></div>
        </div>
 
        <!-- third dice  -->
        <div class="dice-base dice-3">
            <div class="three"></div>
            <div class="three"></div>
            <div class="three"></div>
        </div>
 
        <!-- forth dice  -->
        <div class="dice-base dice-4">
            <div class="forth"></div>
            <div class="forth"></div>
            <div class="forth"></div>
            <div class="forth"></div>
        </div>
 
        <!-- five dice  -->
        <div class="dice-base dice-5">
            <div class="five"></div>
            <div class="five"></div>
            <div class="five"></div>
            <div class="five"></div>
            <div class="five"></div>
        </div>
 
        <!-- six dice  -->
        <div class="dice-base dice-6">
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
            <div class="six"></div>
        </div>
 
    </div>
</body>
</html>

以上是关于活学活用flex制骰子的主要内容,如果未能解决你的问题,请参考以下文章

活学活用flex制骰子

活学活用 screen

活学活用wxPython基础框架

pandas pivot_table 活学活用实例教程

xhost命令详解(活学活用)

JVM活学活用——类加载机制