I'm attempting to align three logos of the same height but different widths on a row spanning the entire screen width. The first logo should be aligned at the left end of the screen, the third one at the right end, and the second logo should float between them with equal spacing. The space between logos should decrease as the display size shrinks until it reaches a defined minimum space. Beyond that point, if the display continues to shrink, the entire row should scale down. Please refer to the image below for a visual representation.
This layout is intended for use in a MailChimp Newsletter.
Here is my current progress:
.my-logo-container{
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.my-logos{
flex: 1;
border: 1px solid red;
height: auto;
max-height: 100px;
}<div class="my-logo-container">
<div class="my-logos">
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</div>
</div>Any assistance would be greatly appreciated.