как манипулировать пробелом в промежутке, не перемещая другие объекты в родительском элементе

Question

Название может быть несколько запутанным, но я пытаюсь достичь того, что в моем нижнем колонтитуле есть 3 элемента, а именно <address> (контактная информация), <img> (логотип) и div (содержащий 3 изображения с социальнымимедиа кнопки).Я пытаюсь понять, что они растянуты над контейнером с пробелом через display: flex.Это работает довольно хорошо, но я хочу, чтобы последние div имели больше места между различными кнопками социальных сетей.Поэтому я увеличил ширину и сделал еще один интервал между ними, чтобы изображения были немного дальше друг от друга.

Проблема в том, что когда я это делаю, другой объект в первом промежутке между ними смещается немного влево, что приводит к тому, что логотип не центрируется.Есть ли способ манипулировать этим?

footer{
  margin-top: 10rem;
}


.footer{
  display: flex;
  justify-content: space-between;
}

.social-media{
  display: flex;
  justify-content: space-between;
  width: 17rem;
}

<footer>
  <div class="container footer">
    <address class="contact-info">
      <h2 class="contact-info-title">Bxl tours</h2>
      <a href="mailto:bxltours@info.be?subject=question" class="link info-txt ">bxltours@info.be</a><br>
      Doornikslaan 5 <br>
      1000 Brussel
    </address>
    <img src="./assets/img/logo_1@288x.png" alt="BXL Tours" width="54" height="77">

    <div class="social-media">
      <img src="./assets/img/devine@288x.png" alt="devine" width="44" height="44">
      <img src="./assets/img/facebook@288x.png" alt="facebook" width="44" height="44">
      <img src="./assets/img/twitter@288x.png" alt="twitter" width="44" height="44">
    </section>
  </div>
</footer>

Answer 1

justify-content: space-between вам не поможет, так как он равномерно распределен между гибкими дочерними элементами (и вы не можете указать, что хотите, чтобы логотип центрировался в нижнем колонтитуле независимо от других элементов).

Вместо этогоОдним из способов будет использование flex для центрирования логотипа и position: absolute; адреса и значков социальных сетей.Обратите внимание, что теперь элементы могут перекрываться в определенных точках останова, поэтому вам придется принять это во внимание.

footer{
  margin-top: 10rem;
}


.footer{
  display: flex;
}

img {
  margin: auto;
}

.contact-info,
.social-media {
  position: absolute;
}

.social-media{
  right: 0;
  display: flex;
  justify-content: space-between;
  width: 17rem;
}

<footer>
  <div class="container footer">
    <address class="contact-info">
      <h2 class="contact-info-title">Bxl tours</h2>
      <a href="mailto:bxltours@info.be?subject=question" class="link info-txt ">bxltours@info.be</a><br>
      Doornikslaan 5 <br>
      1000 Brussel
    </address>
    <img src="./assets/img/logo_1@288x.png" alt="BXL Tours" width="54" height="77">

    <div class="social-media">
      <img src="./assets/img/devine@288x.png" alt="devine" width="44" height="44">
      <img src="./assets/img/facebook@288x.png" alt="facebook" width="44" height="44">
      <img src="./assets/img/twitter@288x.png" alt="twitter" width="44" height="44">
    </section>
  </div>
</footer>