html - 将元素包装到下一行，并保持之间和周围的空间相等

Question

所以我有一个社交图标列表，其中 3 个在第一行，另外 2 个应该换行到下一行，他们确实这样做了。然而，问题是它们在没有正确“间隔”的情况下发生了位移。有没有办法用正确的代码解决这个问题？我知道我可以再做一行，然后把它们放在那里，但我认为那不是干净的代码。

(顺便说一句，这是针对小屏幕的，所以如果你测试它，你需要缩小你的屏幕尺寸)

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>