<分区>
由于某些未知原因，我在换行后的图像之间出现了这种差距
请在此处查看示例代码: https://codepen.io/mohammad-hossein-amri/pen/NEpzro
但是我想要的结果应该是这样的
我几乎尝试了所有方法，但仍然存在差距。不知何故，这个额外的空间在换行后被添加到图像之间
html, body{
background: #fff;
padding:0; margin:0;
height:100%;
}
ul#flex-container{
list-style-type: none;
margin:0; padding: 0;
display: flex;
flex-wrap: wrap;
}
ul li{
margin:0; padding: 0;
flex-grow: 1;
width:250px;
color: #fff;
font-size: 2.2em;
position: relative;
}
ul li img{
width: 100%;
}
a{
margin: 0;
padding: 0;
} <div>
<ul id="flex-container">
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1532304887200-8db8cf689891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c00cde864c07aaffc35fb0b5567015e&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1484849764956-0988adac7e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81b2754a46f790afd076f2293820c487&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1489832049190-666d39b40b7e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dbc2c8c1720440ddfc6618eccd9f1656&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1535966092542-fcdb19e1ea4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28c12f97d6789fc30a2755b983293905&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1512238701577-f182d9ef8af7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c396959d87964c1b361672856f73c67b&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1512341875699-0b87026a8d5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6119da2cefcae7d1a886c7ce698abef&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
</ul>
</div>更新
我看到其他人用相同的答案标记了另一个问题，但那个问题没有出现在谷歌搜索中，因为它与 flex 无关。不同的症状但相同的解决方案不会使问题相互重复!