美文网首页
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