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

3,331 阅读1分钟

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

image.png

这是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;
      }

解决效果图:

image.png

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