如何在不移动父元素中的其他对象的情况下在空间之间操作空间之间答案

【问题标题】：how to manipulate space-between in a space-between without moving the other objects in the parent element如何在不移动父元素中的其他对象的情况下在空间之间操作空间之间
【发布时间】：2018-11-22 08:33:51
【问题描述】：

标题可能有点令人困惑，但我想要达到的是我的页脚有 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>

【问题讨论】：

标签： html css flexbox display

【解决方案1】：

justify-content: space-between 不会为您提供帮助，因为它会在 flex 子项之间均匀地应用间距（并且您不能表示您希望徽标在页脚中居中而不管其他元素如何）。

相反，一种方法是使用 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>

【讨论】：