flex布局最后一行列表左对齐的方法

2022-02-25发布 674阅读
CSS

最后一行列数不固定

1 .使用足够多的空白标签来填充占位
2 .如果一行最多有7个元素,那么添加6个空白的元素即可
3 .代码

<style>
        .container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-right: -10px;
            /* 整个的高度由container里面的list元素撑起来,他们有高度 */
        }
        .list {
            width: 100px; height:100px;
            background-color: skyblue;
            margin: 15px 10px 0 0;
        }
        .container > i {
            width: 100px;
            /* 没有高度,如果超出也不会新开一行,而且是内联元素 */
            margin-right: 10px;
        }
    </style>

<div class="container">
        <div class="list"></div>
        <i></i>
</div>

相关文章