Как я могу выровнять 3 изображения (логотипы) в ряд по ширине отверстия и сохранить их таким образом на небольших дисплеях

Question

Я постараюсь выровнять 3 логотипа одинаковой высоты, но с различной шириной в ряду по ширине экрана отверстия: первое изображение должно быть выровнено по левому краю экрана, третье - по левому краюправый конец экрана и второй должны плавать между двумя другими изображениями с одинаковым расстоянием между ними. Когда дисплей становится меньше, пространство должно уменьшаться, пока не достигнет определенного минимального пространства. С этого момента, если дисплей становится еще меньше, ряд отверстий должен уменьшиться. Я надеюсь, что изображение поможет прояснить, что я имею в виду.

как оно должно выглядеть

Это для информационного бюллетеня MailChimp.

То естькак далеко я получил:

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

Любая помощь высоко ценится.

Answer 1

У меня есть альтернатива для вас. Вы имели в виду это?

.my-logo-container{
  width: 100%;
  margin:0;
}

ul.my-logos{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.my-logos li{
    width: 32.33333%;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin:0;
    float: left;
    text-align: center;
    border:1px solid red;
}
ul.my-logos li a img{
    max-width: 130px;
    height:80px;
}

<div class="my-logo-container">
  <ul class="my-logos">
    <li>
      <a href="https://via.placeholder.com/100x80.png">
      <img src="https://via.placeholder.com/100x80.png">
      </a>
    </li>
    <li>
      <a href="https://via.placeholder.com/195x80.png">
      <img src="https://via.placeholder.com/195x80.png">
      </a>
    </li>
    <li>
      <a href="https://via.placeholder.com/175x80.png">
      <img src="https://via.placeholder.com/175x80.png">
      </a>
    </li>
  </ul>
</div>