将Flex项改为figure元素后无法去除项间空白的问题

你遇到的空白是因为浏览器默认给<figure>元素设置了外边距（margin），这个默认样式会让flex容器里的figure项之间产生空隙。

只需要给figure元素清除默认外边距就能解决：

figure {
  margin: 0;
}

把这段代码添加到你的CSS里，flex项之间的空白就会消失。

修改后的完整CSS代码如下：

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

img {
  max-width: 25px;
}

figcaption {
  font-size: 10px;
  text-align: center
}

.ballon {
  display: flex;
  flex-flow: row wrap;
  max-width: 450px;
}

figure {
  margin: 0;
}

内容的提问来源于stack exchange，提问作者dawsboss