每个子项宽度不确定
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
//每一行都有四列,宽度确定为24% 则剩余总计4%的宽度 最后一行四列的话有3个间隙
//每个间隙为4%/3
.list{
margin-right: calc(4% / 3)
}
//第二列 右边有两个间隙
.list:last-child:nth-child(4n - 2) {
margin-right: calc(48% + (4% * 2 / 3));
}
//第三列 右边有一个间隙
.list:last-child:nth-child(4n - 1) {
margin-right: calc(72% + 4% / 3);
}
grid可以解决列数不固定的情况
justify-content: space-between;
display: grid;
grid-template-columns: repeat(auto-fill, 256px);
grid-gap: 16px;