Html 将项目换行到下一行，并保持前后间距相等

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

（顺便说一句，这是针对小屏幕的，所以如果您测试它，您需要缩小屏幕大小）

CSS:

HTML:

---

在我看来，您的flex属性正在做正确的事情。输出就是它应该是什么样子。您可以做的一件事是删除

justify content

属性，它将显示您想要的方式。给图像留一个空白，这样它们之间就有了空间。更多信息请参见下面的代码

#联系人列表{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
列表样式类型：无；
保证金：0自动；
/*证明内容：周围的空间*/
填充：0；
背景：红色；
宽度：300px；
}
#联系人列表李{
/*保证金：1px*/
/*背景：黄色*/
/*对齐项目：柔性端*/
}
#联系人列表{
显示：块；
高度：80px；
/*利润率：10px自动*/
保证金：5px；
宽度：80px；
}

---

我认为您需要在旧学校编写代码。使用
float：左。Flexbox在
safari
和
IE11
中仍然存在问题。这是旧校规

在此代码中，所有浏览器和所有设备都能100%响应

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


#联系人列表{
显示：表格；
列表样式类型：无；
填充：0；
背景：红色；
宽度：100%；
}
#联系人列表李{
浮动：左；
边缘底部：10px；
}
#联系人列表li:不是（：最后一个孩子）{
右边距：10px；
}
#联系人列表李a{
显示：块；
保证金：0；
填充：0；
}
#联系人列表{
显示：块；
最大宽度：100%；
身高：奥托；
}










不确定这是否完全是您要查找的，但如果我理解正确，您的问题在于最后两个项目及其水平位置。试试看：是的，不过我的意思是最后两个盒子之间的间隔是相等的。因此，如果第五个盒子在第三个盒子下面，请澄清。我不明白你的意思？：）我修好了！正如你所看到的，我在HTML中犯了一个错误，图像标记没有右括号。谢谢你！
#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;
}

<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>