將項目包裝到下一行，並保持之間和周圍的空間相等

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> 

希望能有所幫助。