flex布局入门 骰子制作（待修复）

总结：只用了justify-conten ， flex个体align-self

代码

 

 

<!DOCTYPE html>
<html>
<head>
    <title>骰子</title>
    <!-- <meta http-equiv="refresh" content="3"> -->
    <style type="text/css">
        * {padding: 0;margin: 0;}
        body {background-color: #777;}
        div[class] {float: left;border: 1px red solid;}
        .one {width: 150px;height: 150px;background-color: white;display: flex;justify-content: center;align-items: center;}
        .one div {width: 50px;height: 50px;background-color: #000;border-radius: 50%;}
        /*第二个*/
        .two {width: 150px;height: 150px;background-color: white;display: flex;justify-content: space-between;}
        .two div {width: 50px;height: 50px;background-color: #000;border-radius: 50%;}
        .two div:nth-child(2) {align-self: flex-end;}
        /*第三个*/
        .three {width: 150px;height: 150px;background-color: white;display: flex;justify-content: space-between;}
        .three div {width: 50px;height: 50px;background-color: #000;border-radius: 50%;}
        .three div:nth-child(2) {align-self: center;}
        .three div:nth-child(3) {align-self: flex-end;}
        /*第四个*/
        .four {width: 150px;height: 150px;background-color: white;}
        .four div { width: 100%;height: 50%;/*background: yellow*//*border: 1px solid;*/display: flex;justify-content: space-between;}
         i {width: 50px;height: 50px;background: #000;border-radius: 50%;display: block;}
        .four div:nth-child(2) i {align-self: flex-end;}
        /*第五个 和第六个类似*/
        .five,.six {width: 150px;height: 150px;background-color: white;}
        .five div,.six div{width: 100%;height: 33%;display: flex;justify-content: space-between;}
        .five div:nth-child(2) {justify-content: center;}
            
    </style>
</head>
<body>
<div class="big">
    <div class="one">
        <div></div>
    </div>
    <div class="two">
        <div></div>
        <div></div>
    </div>
    <div class="three">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="four">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>

    </div>
    <div class="five">
    <div>
        <i></i>
        <i></i>
    </div>
    <div>
        <i></i>
    </div>
    <div>
        <i></i>
        <i></i>
    </div>
    </div>
    <div class="six">
    <div>
        <i></i>
        <i></i>
    </div>
    <div>
        <i></i>
        <i></i>
    </div>
    <div>
        <i></i>
        <i></i>
    </div>
</div>        
</div>
</body>
</html>

 

posted @ 2021-01-21 22:17  inks  阅读(126)  评论(0)    收藏  举报