需求:
要实现如下的列表效果,重点是左边
刚开始的思路是用 flex布局然后使用 justify-content: space-between;这个属性来解决,但是因为列表的数据不是固定的,如果列表的数据最后一行是两个时候就会是下面这种效果了
解决办法:去掉justify-content: space-between; 将图片的宽度设置成屏幕的三分之一,然后设置 border: 1px solid #fff; 这样会出现一个问题就是右边的图片会有留白,所以就要用到这个函数来解决 代码如下
.grid-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
border-top: 1px solid #fff;
}
.grid-container .grid-item {
display: flex;
width: 33.3%;
flex-direction: column;
box-sizing: border-box;
border: 1px solid #fff;
border-top: none;
border-left: none;
}
.grid-item:nth-of-type(3n) {
border-right: none;
}
意思就是当这个图片是3的倍数的时候,让右边框取消,这样就解决了上面的问题。