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.