Html Flexbox flex wrap显示的图像相互重叠

我似乎无法在以下代码中使用

flex wrap:row wrap

。这些图像只是相互重叠，而不是换行。我做错了什么？我正在使用最新版本的Chrome

您可以看到代码笔：

*{
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
.行{
宽度：100%；
显示器：flex；
柔性流：行换行；
}
.col-4{
宽度：33.33%；
文本对齐：居中；
}

特色作品
应用
向日葵
博克

问题在于，即使内容较宽，也强制使用33%的宽度：

.col-4{
宽度：33.33%；
}

相反，请使用

最小宽度

。然后，如果flex项目的内容更广泛，则允许其增长更多

.col-4{
最小宽度：33.33%；
}

*{
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
.行{
宽度：100%；
显示器：flex；
柔性流：行换行；
}
.col-4{
最小宽度：33.33%；
文本对齐：居中；
}

特色作品
应用
向日葵
博克