我有下面的HTML / CSS，然后在文件中跟踪各种最大/最小像素大小的媒体查询。
<div class="header-flags-wrapper">
<div class="flagbox1">
<a href="#"><img src="https://**********.blob.core.windows.net/flags/014-UK.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/015-spain.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/006-portugal.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/007-brazil.png" /></a>
</div>
<div class="flagbox2">
<a href="#"><img src="https://**********.blob.core.windows.net/flags/002-cuba.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/003-venezuela.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/004-bolivia.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/005-paraguay.png" /></a>
</div>
<div class="flagbox3">
<a href="#"><img src="https://**********.blob.core.windows.net/flags/001-uruguay.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/008-argentina.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/009-colombia.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/010-chile.png" /></a>
</div>
<div class="flagbox4">
<a href="#"><img src="https://**********.blob.core.windows.net/flags/011-peru.png" /></a>
<a href="#"><img src="https://********.blob.core.windows.net/flags/012-ecuador.png" /></a>
<a href="#"><img src="https://*********.blob.core.windows.net/flags/017-angola.png" /></a>
<a href="#"><img src="https://**********.blob.core.windows.net/flags/018-european-union.png" /></a>
</div>
<span class="flagstretch"></span>
</div>
1200px宽屏幕上的默认视图看起来不错。我无法理解的是如何做到这一点。所有其他元素缩小到一起，直到它们到达边界，然后它们改变形状或包裹等。实现这一目标的最佳方法是什么？我想要的是，旗杆上的边距减少使它们更紧密，直到它们相互接触，然后我将所有包装物隐藏起来。每次这样做的尝试都失败了，而且当你知道如何时，大多数事情都很容易。
.header-flags-wrapper {
float: left;
height: 50px;
width: 1500px;
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 {
width: 310px;
/*height: 30px;*/
/*vertical-align: top;*/
display: inline-block;
*display: inline;
zoom: 1
}
.flagbox1, .flagbox2, .flagbox3, .flagbox4 a {
float: left;
/*width: 30px;*/
padding: 2px;
margin-top: 5px;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}