flex实现筛子布局-前端ABC

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: burlywood;
            display: flex;
            flex-wrap: wrap;
        }

        .main {
            width: 200px;
            height: 200px;
            background: white;
            padding: 5px;
            display: flex;
            object-fit: contain;
            margin: 16px;
            box-shadow: inset 0 5px white,
            inset 0 -5px #bbb,
            inset 5px 0 #d7d7d7,
            inset -5px 0 #d7d7d7;

            border-radius: 10%;
            padding: 14px;
        }

        .main .item {
            width: 45px;
            height: 45px;
            background: black;
            border-radius: 50%;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }

        .first {
            justify-content: center;
            align-items: center;
        }

        .second {
            justify-content: space-between;
        }

        .second .item:nth-child(2) {
            align-self: flex-end;
        }

        .third {
            justify-content: space-between;
        }

        .third .item:nth-child(2) {
            align-self: center;
        }

        .third .item:nth-child(3) {
            align-self: flex-end;
        }

        .four {
            justify-content: space-between;
        }

        .four .column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .fif {
            justify-content: space-between;
        }

        .fif .column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .fif .column:nth-child(2) {
            justify-content: center;
            align-self: center;
        }

        .six {
            justify-content: space-between;
        }

        .six .column {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="first main">
        <div class="item"></div>
    </div>
    <div class="second main">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="third main">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="four main">
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="fif main">
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="column">
            <div class="item"></div>
        </div>
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="six main">
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</body>

</html>
欢迎分享本文，转载请保留出处：前端ABC » flex实现筛子布局
flex实现筛子布局

相关推荐

发表评论 0
