将项目包装到下一行，并保持之间和周围的空间相等

Question

因此，我有一个社交图标列表，其中三个图标位于第一行，其他两个图标应包裹在下一行，它们也一样。 然而，问题在于，它们在没有正确地“间隔开”的情况下发生位移。 有没有办法用正确的代码解决这个问题？ 我知道我可以再排一行，然后将它们放在那儿，但是我认为那不是干净的代码。

（顺便说一句，这是用于小屏幕的，因此，如果对其进行测试，则需要缩小屏幕尺寸）

CSS：

#contactlist {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 list-style-type: none;
 justify-content: space-between;
 margin: 0 auto;
 padding: 0;
 width: 75%;
}

#contactlist img {
 display: block;
 height: 80px;
 margin: 10px auto;
 width: 80px;
}

HTML：

<ul id="contactlist"
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
 <li><a href="https://www.instagram.com/maikvv/"><img src="assets/img/instagram.png"</a></li>
</ul>

Answer 1

IMO，您的flex属性正在做正确的事情。 输出是应该的。 您可以做的一件事是删除justify-content属性，它将显示您想要的方式。 并给图像留有余量，以便它们之间留有空间。 下面的代码更多。

 #contactlist { display: flex; flex-direction: row; flex-wrap: wrap; list-style-type: none; margin: 0 auto; /* justify-content: space-around; */ padding: 0; background: red; width: 300px; } #contactlist li { /* margin: 1px; */ /* background: yellow; */ /* align-items: flex-end; */ } #contactlist img { display: block; height: 80px; /* margin: 10px auto; */ margin: 5px; width: 80px; } 

 <ul id="contactlist" <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> </ul> 

Answer 2

我认为您需要在旧学校里编写代码。 使用float: left; 。 Flexbox在safari和IE11仍然存在问题。 这是旧学校代码。

在此代码中，所有浏览器和所有设备均具有100％的响应速度。

在这种情况下，我避免使用flexbox 。

 #contactlist { display: table; list-style-type: none; padding: 0; background: red; width: 100%; } #contactlist li { float: left; margin-bottom: 10px; } #contactlist li:not(:last-child){ margin-right: 10px; } #contactlist li a{ display: block; margin: 0; padding: 0; } #contactlist img { display: block; max-width: 100%; height: autuo; } 

 <ul id="contactlist"> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> <li> <a href="https://www.instagram.com/maikvv/"> <img src="http://placehold.it/80x80" </a> </li> </ul> 

希望能有所帮助。