如何在CSS上使用带有宽度转换的flex-wrap？

问题描述

我是一名初级开发人员，最近开始使用flex。我要完成的工作是在代码笔上的此代码段中使用flex-wrap：https://codepen.io/knyttneve/pen/YgZbLO 无论如何，这里是css代码：

.container {
    display: flex;
    flex-wrap: wrap; 
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 50vh;
}

.box {
    flex: 1;
    overflow: hidden;    
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0,.1);
    line-height: 0;
    transition: .5s;
} 

使用3或4个框，效果很好，但是（目前）我需要加9，所以结果没有折叠就不是我想要的。因此，我决定要做的是添加flex-wrap，以使组件本身重新调整要显示的元素，以根据可用的方式进行显示。

问题在于，不仅它不起作用，而且悬停效果不再仅在水平方向上放大图像，而且也放大了图像的高度，这是我不想要的。我已经在图像上附加了预期的悬停和不需要的图像，这些图像是通过放置flex-wrap获得的。

• Hover effect I want
• Hover effect I don't want

有人可以告诉我如何通过每行最多保留4或5张图像来实现这种效果吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）