图标水平排列（间隙相同）的实现

 问题描述：

思路：我们可以用flex布局，对justify-content:space-between;稍作改进，即可实现上图所示的效果！！

代码如下所示：

<ul class="share-list">
      <li class="share-item"></li>
      <li class="share-item"></li>
      <li class="share-item"></li>
  </ul>

.share-list{
    display: flex;
    justify-content: space-between;
}
.share-list:before,
.share-list:after{
    content: "";
}
.share-item{
    width: 60px;
    height: 60px;
}

小结：就是在第一个图标前和最后一个图标后添加一个空内容，同样参与布局，即可达到效果！！

 

本博客由博主原创，如需转载需说明出处！谢谢支持！