Question

标题可能有些令人困惑，但我想要触及的是我的页脚有3个元素，即<address>（联系信息），<img>（徽标）和{{1 （包含带社交媒体按钮的3张图片）。我试图触及的是他们通过div之间的空间延伸到容器上。这工作得很好但我希望最后display: flex在不同的社交媒体按钮之间有更多的空间。所以我给了它一个更大的宽度，并在两者之间做了另一个空间，所以图像彼此之间的距离相等。

问题在于，当我这样做时，第一个空间中的另一个物体稍微向左移动，这导致徽标被取消。有没有办法操纵这个？

＆＃13;

div

＆＃13;

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

＆＃13;

Answer 1

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

相反，一种方法是使用flex将徽标居中，position: absolute;使用地址和社交媒体图标。请注意，现在元素可能在某些断点中重叠，因此您必须考虑到这一点。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何在空间之间操纵空间 - 而不移动父元素中的其他对象

1 个答案: