前端CSS：解决flex多行布局的行间距异常、上下行间隔太大问题

今天开发时使用flex布局发现上下行间距太大，有点难看，如下图所示！

这是css代码，我把无关代码去掉了，简洁一点好明白

    .iconArea {
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        justify-content: center;
        align-items: center;

      }

很简单就父类iconArea 使用了flex布局，然后li里的icon元素水平垂直居中对齐，然后这样换行后，上下行之间的间隔就会被平分，也就是图上这样的效果，我们需求是想紧挨着，这时很简单，只需要加个align-content:flex-start;就能解决，如下图所示

    .iconArea {
      display: flex;
      flex-wrap: wrap;
      
      align-content:flex-start;//加这个属性就能解决

      li {
        display: flex;
        justify-content: center;
        align-items: center;
      }

解决效果图：

希望本篇文章能帮到你！！