欢迎关注本专栏，会经常分享一些简单实用的技巧！

感谢各位大佬点赞！关注我，学习实用前端知识！

需求简介

在前端开发中，我们经常遇见这样的开发需求，实现下列以此排布的卡片，这些卡片宽度一般是固定的，

并且在不同大小的屏幕宽度下自动换行。

实际开发中遇到的问题

实现这样的一个需求其实不难，我们很容易想到设置一个安全宽度（如下图绿色），然后进行弹性布局。

一个很容易写出的代码是这样的：

使用flex弹性布局，我们很看似轻松的实现了需求。但是，当我们将卡片数量减少一个，问题就出现了

由于我们使用了justify-content: space-between;的布局方式，4，5卡片左右对称布局，这显然不符合我们的要求！

聪明的人，可能会把justify-content: space-between改成align-content: space-between

这样的确会让卡片以此排列，但是没了右边距！因此，你可能会手动加上右边距

你会尴尬的发现换行了，因为两个卡片的宽度加元素的右边距之和大于你设置的安全宽度了！

当然，你可以让每个卡片的右边距小一点，这样不会换行，但是，右边的元素永远无法贴边了！

如何解决这个问题

想解决上的问题，也有很多方法。

如果永远是第3n的元素是最后一列，这个问题非常容易解决：

.container{
display: flex;
width:630px;
align-content: space-between;
flex-flow: wrap;
.crad{
height:100px;
background: blueviolet;
width:200px;
margin-bottom: 16px;
margin-right: 16px;

    &:nth-child(3n) {
margin-right: 0;

    }

  }

}

4n,5n,6n我们都可以用这样的方式解决！

但如果安全宽度是变化的（630px不固定），比如随着浏览器尺寸的变化，每行的卡片数量也变化，上述方式就无法解决了。

此时，我们可以用下面的方法：

我们可以在绿色盒子外在套一个红色盒子，超出红色盒子的部分隐藏即可

代码如下

上述代码中，我们的container元素设置了width: calc(100% + 16px)保证其比父元素多出16px的容错边距，然后我们给红色盒子设置了overflow: hidden，就避免了滚动条出现。

完美解决了这个布局问题！