最后一行列数不固定
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>
列数不确定，html不能加元素
1 .Grid布局
2 .
每个子项宽度不确定
1 .最后一项margin-right:auto
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
margin-right: auto;
}
2 .创建伪元素并设置flex:auto或者flex:1
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 使用伪元素辅助左对齐 */
.container::after {
content: '';
flex: auto; /* 或者flex: 1 */
}
每一行列数是固定的
1 .根据个数最后一个元素动态margin
.list:last-child:nth-child(4n - 2) {
margin-right: calc(48% + 8% / 3);
}
