大家可以看到，两个名片虽然是自动横排显示了，但是靠的太近，非常不雅观；

我们只要在 div class=" " 引号范围里加上 mr-2 mb-2 就可以让名片之间产生间距。 效果如下：

但是这样给每个 class 都加代码有点繁琐，于是我们可以直接在CSS里加上外间距代码就可以了；
代码： margin: 15px;

卡片CSS代码就变成了：

<style>
	.ka_pian_men {
	display: flex;
	flex-wrap: wrap;
	margin: 15px;
	}
</style>

以上方法由CL提供、darcyc指导，十分感激。
希望下次再回来，能够看得懂……

现成的完整代码如下：

<style>
	.ka_pian_men {
	display: flex;
	flex-wrap: wrap;
	margin: 15px;
	}
</style>

<style>
  .my_img {
	  box-shadow: 0px 0px 1px 1px rgb(23 162 184 / 35%);
    padding: 5px;
    border-radius: 2% !important;
	  height:300px;
    width:210px; 
    object-fit: cover;
  }
</style>

<div class="ka_pian_men" style:display: flex;>
	
<div class="ka_pian_men" style:display: flex;>
<img src='图片链接' class='my_img no-lity'>
</div>	
	
<div class="ka_pian_men" style:display: flex;>
<img src='图片链接' class='my_img no-lity'>
</div>		

</div>

style里替换一下代码，会出现阴影特效，更加美观。
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);