简体   繁体   中英

Wrap items to the next row, and keep space between and around equal

So I have a list of social icons, where 3 of them are on the first line and the other 2 should wrap to the next line, which they do. However the problem is that they displace, in the term of not being correctly 'spaced-between'. Is there a way to fix this in proper code? I know I could just make another row, and put them there, but that is not clean code I think.

(Btw, this is for small screens, so if you test it out, you need to shrink your screen size)

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>

IMO, your flex properties are doing the correct thing. The output is how it should be. One thing that you can do is to remove the justify-content property and it will show the way you want. And give margin to the images so that there is space between them. More in code below..

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

I think you need write your code in old school . Using float: left; . Flexbox have still issue in safari and IE11 . Here is the old school code.

In this code is 100% responsive with all browser and all devices.

I'm avoid to use flexbox in this situation.

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

Hope this help.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2025 STACKOOM.COM