美文网首页
felx多行不确定下,最后一行局左对齐

felx多行不确定下,最后一行局左对齐

作者: 五四青年_4e7d | 来源:发表于2020-07-23 21:00 被阅读0次
    <!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>
       .container {
        display: flex;
        flex-wrap: wrap;
        width:100%;
    }
    .list {
        width: 32%; height: 100px;
        background-color: skyblue;
        margin-top: 15px;
    }
    .list:not(:nth-child(3n)) {
        margin-right: calc(4% / 3);
    }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
        </div>
        <script>
        </script>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:felx多行不确定下,最后一行局左对齐

          本文链接:https://www.haomeiwen.com/subject/jxkklktx.html