majinbo111
majinbo111

flex 布局骰子

dice.scss

.main {
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    // justify-content: center;
    vertical-align: center;
    flex-wrap: wrap;
    align-content: center;
    height: 800px;
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(to top, #222, #333);
    .item {
        background-color: #e7e7e7;
        box-shadow:
            inset 0 5px white, 
            inset 0 -5px #bbb,
            inset 5px 0 #d7d7d7, 
            inset -5px 0 #d7d7d7;
        border-radius: 10%;
        height: 100px;
        width: 100px;
        padding:2px;
        // border: 1px solid red;
        .column {
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }
        .center {
            flex-basis: 100%;
            display: flex;
            justify-content: center;
        }
        .spot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin: 4px;
            background-color: #333;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }
    }
    .first {
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: space-around;
    }
    .second {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .spot:nth-child(2) {
            align-self: flex-end;
        }
    }
    .third {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .spot:nth-child(2) {
            align-self: center;
        }
        .spot:nth-child(3) {
            align-self: flex-end;
        }
    }
    .forth {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }
    .ninth {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-between;
    }
}

编译出 dice.css

sass dice.scss dice.css

dice.html


 

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>index htmltitle>
        <link rel="stylesheet" href="dice.css" />
    head>
    <body>
        
        <div class="main">
            <div class="item first">
                <div class="spot">div>
            div>
            <div class="item second">
                <div class="spot">div>
                <div class="spot">div>
            div>
            <div class="item third">
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
            div>
            <div class="item forth">
                <div class="column">
                    <div class="spot">div>
                    <div class="spot">div>
                div>
                <div class="column">
                    <div class="spot">div>
                    <div class="spot">div>
                div>
            div>
            <div class="item">
                <div class="column">
                    <div class="spot">div>
                    <div class="spot">div>
                div>
                <div class="center">
                    <div class="spot">div>
                div>
                <div class="column">
                    <div class="spot">div>
                    <div class="spot">div>
                div>
            div>
            <div class="item">
                <div class="column">
                    <div class="spot">div>
                    <div class="spot">div>
                div>
                <div class="column">
                    <div class="spot">div>
                    <div class="spot">div>
                div>
                <div class="column">
                    <div class="spot">div>
                    <div class="spot">div>
                div>
            div>
            <div class="item ninth">
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
                <div class="spot">div>
            div>
        div>
    body>
html>

最终结果：

flex 布局骰子_第1张图片

推荐参考文章

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

你可能感兴趣的:(WEB前端)