How can I change size of pictures in a flexbox? - html

Question

I try to develop website for my portfolio. I want to do something like that :
But I've some problem with the 3 icons for Twitter/Instagram and Deviantart. To put the icons like that, I use the flexbox in html. Currently, I've that :
#conteneur {
display: flex;
justify-content: space-between;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
Test with CodePen here : https://codepen.io/lucbenedet/pen/yLbPMgK
But as you can see, the pictures are too large and when I try to put the pictures to a size of 35px like that :
#conteneur
{
display: flex;
justify-content: space-between;
width: 35px;
}
or
.element1
{
width: 35px;
}
The resize doesn't works...
Someone to show how to do that ?

Answer 1

You can update your CSS with following code.
#conteneur {
display: flex;
justify-content: space-between;
width: 150px;
padding: 10px;
}
#conteneur div img {
width: 35px;
height: 35px;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
You can have some space between icons when you maximize the width of the container

Answer 2

you can reset width on the flex-container to max-content (3 icones shouldnot overflow) and use gap to set a distance in between them.
You could use em for the gap and icon's width to have a coherent render.
Possible example:
#conteneur {
display: flex;
width: max-content;
align-items: center;
margin: auto;
gap: 1.6em;
}
#conteneur div img {
width: 3em;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
possible example from your codepen https://codepen.io/gc-nomade/pen/qBmVjBV