css flex实现多头像叠加ui效果,适用于多头像拼单场景

实现多头像叠加ui效果

第一种实现方式

简单粗暴直接使用margin-right实现,缺点是第一行右侧最右边头像溢出容器,代码中的三行注释的代码放开后可解决这个问题。




  
  
  
  Document
  


  
优化前.png
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
优化后:打开注释的代码后的效果.png

第二种实现方式

在第一种的基础上使用flex布局,通过外层元素来限制图片的位置




  
  
  
  Document
  


  
实现效果.png

你可能感兴趣的:(css flex实现多头像叠加ui效果,适用于多头像拼单场景)