CSS如何优雅的实现卡片多行排列布局？ 点击关注公众号，“技术干货”及时达！ 需求简介在前端开发中，我们经常遇见这样的开发需求，实现下列以此排布的卡片，这些卡片宽度一般是固定的， 并且在不同大小的屏幕宽度下自动换行。 实际开发中遇到的问题实现这样的一个需求其实不难，我们很容易想到设置一个安全宽度（如下图绿色），然后进行弹性布局。 一个很容易写出的代码是这样的： template divclass="container" divclass="crad"/div divclass="crad"/div divclass="crad"/div divclass="crad"/div divclass="crad"/div divclass="crad"/div /div /template stylelang="less"scoped .container{ width:630px; display:flex; justify-content:space-between; flex-flow:wrap; .crad{ height:100px; background:blueviolet; width:200px; margin-bottom:16px; } } /style 使用flex弹性布局，我们很看似轻松的实现了需求。但是，当我们将卡片数量减少一个，问题就出现了 template divclass="container" divclass="crad"/div divclass="crad"/div divclass="crad"/div divclass="crad"/div divclass="crad"/div /div /template 由于我们使用了justify-content: space-between;的布局方式，4，5卡片左右对称布局，这显然不符合我们的要求！ 聪明的人，可能会把justify-content: space-between改成align-content: space-between stylelang="less"scoped .container{ width:630px; display:flex; align-content:space-between; flex-flow:wrap; .crad{ height:100px; background:blueviolet; width:200px; margin-bottom:16px; } } /style 这样的确会让卡片以此排列，但是没了右边距！因此，你可能会手动加上右边距 stylelang="less"scoped .container{ width:630px; display:flex; align-content:space-between; flex-flow:wrap; .crad{ height:100px; background:blueviolet; width:200px; margin-bottom:16px; margin-right:16px; } } /style 你会尴尬的发现换行了，因为两个卡片的宽度加元素的右边距之和大于你设置的安全宽度了！ 当然，你可以让每个卡片的右边距小一点，这样不会换行，但是，右边的元素永远无法贴边了！ 如何解决这个问题想解决上的问题，也有很多方法。 如果永远是第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不固定），比如随着浏览器尺寸的变化，每行的卡片数量也变化，上述方式就无法解决了。 此时，我们可以用下面的方法： 我们可以在绿色盒子外在套一个红色盒子，超出红色盒子的部分隐藏即可 代码如下 template divclass="card-content-box" divclass="container" divclass="crad"/div divclass="crad"/div divclass="crad"/div divclass="crad"/div divclass="crad"/div /div /div /template stylelang="less"scoped .card-content-box{ width:100%; background:red; overflow:hidden; .container{ width:calc(100%+16px); display:flex; align-content:space-between; flex-flow:wrap; .crad{ height:100px; background:blueviolet; width:200px; #margin-bottom:16px; } } } /style 上述代码中，我们的container元素设置了width: calc(100% + 16px)保证其比父元素多出16px的容错边距，然后我们给红色盒子设置了overflow: hidden，就避免了滚动条出现。 完美解决了这个布局问题！ 往期精彩文章Threejs中三维物体和HTML的爱恨情仇：CSS2DRenderergit提交错了？别慌，直接删除提交记录threejs做特效：实现物体的发光效果-EffectComposer详解！如何快速实现一个无缝轮播效果我改进了数据滚动方式！老板直接加薪如何丝滑的实现首页看板拖拉拽功能？点击关注公众号，“技术干货”及时达！ 阅读原文