Flexbox优雅解决inline-block空隙问题

认真写过前端的同学（不是“Copy and Paste From Stack Overflow”）几乎都遇到过inline-block空隙问题（没碰到也没关系，我下面会重现这个问题）。网上也给出了各种奇技淫巧来解决这个问题，其中以张鑫旭的《去除inline-block元素间间距的N种方法》的解决方案最全，但hack味道过浓，这里我用Flexbox解决这个问题，优雅且简洁。

问题重现

属性是display: inline-block水平呈现的元素之间，换行显示或空格分隔的情况下会有间距。这种情况最常见于导航栏，看如下HTML和CSS代码：

  

    
首页
    
新闻
    
关于
    
联系
  

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  background-color: #8192D6;
  color: white;
  padding: 4px 6px;
}

产生的效果如下图所示：

inline-block空隙

这种表现是符合规范的应该有的表现，不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它。

经典解决方案

网上有很多的解决方法，分别从修改HTML、CSS和JavaScript的角度来解决这个问题，所以你就可以看出这个问题有多么的常见以及多么的扰人了吧！这里我们介绍几种HTML和CSS解决该问题的经典方法，JavaScript解决这个问题实在是大材小用了。

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了。有如下几种HTML的解决方法：

• 将所有的inline-block元素写在一行中，这种做法对于当前这种元素少的情况很适用，但是元素多了全都挤在一行很难阅读和维护。

    
首页
新闻
关于
联系

• 改变标签的位置，没错这样做代码真的很丑，不忍卒读。

  

  首页

  新闻

  关于

  联系


或者：


    
首页
新闻
关于
联系


或者使用注释：


    
首页
新闻
关于
联系

使用CSS解决也有很多局限性，比如：

• 通过设置父元素的 font-size: 0可以让间隙消失，但同时你得修改子元素的字体大小，如果子元素很少倒也没啥问题，但是如果子元素很多，你就得一个一个去设置，这个就很麻烦了。
• 或者你可以设置 margin或letter-spacing或word-spacing属性为负值，也可以去掉空隙，但这样做跨浏览器兼容性不好。

Flexbox优雅解决

Flexbox只要在ul的样式中加一句话就可以了：

ul {
  display: flex;
}

此时的心情应该如下图：

这是飞一样的感觉