將物品包裝到下一行，並保持等於和大約相等的空間

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

國際海事組織，你的彈性屬性正在做正確的事情。輸出結果應該如何。你可以做的一件事是刪除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>

希望這有助於。