Struggling to center these 3 items horizontally using flexbox, all of the same width. HTML:
<div id="contact_flex_container">
<div id="fb">
<img src="img/contact/fb.png" class="contact_img">
<h3>Title1</h3>
</div>
<div id="yt">
<img src="img/contact/yt.png" class="contact_img">
<h3>Title2</h3>
</div>
<div id="mail">
<img src="img/contact/mail.png" class="contact_img">
<h3>Title3</h3>
</div>
</div>
CSS:
#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: space-around;
}
.contact_img {
width: 40px;
height: 40px;
}
#fb {
flex-basis: 0;
flex-grow: 1;
}
#yt {
flex-basis: 0;
flex-grow: 1;
}
#mail {
flex-basis: 0;
flex-grow: 1;
}
Tried various methods like margin adjustments and justify-content settings, but they don't seem to work. Not sure what's missing or where I'm going wrong. Any suggestions?