在方向列中重叠的 Flex 框

Question

我正在尝试制作一个页脚，在左侧显示一个按钮，在右侧显示 3 个社交媒体图标，并在其下方显示版权文本，我似乎工作正常。问题是移动即时通讯然后尝试使它们全部堆叠在一起，但按钮和图标似乎相互重叠。

HTML

<div class="footer">
  <div class="footerHeader">
    <div>
        <a id="login" href="/login" class="btn btn-primary">Sign in</a>
    </div>
    <div class="socialMedia">
      <img alt="Facebook" class="icon zoom" src="/images/facebook.png">
      <img alt="Instagram" class="icon zoom" src="/images/instagram.png">
      <img alt="Twitter" class="icon zoom" src="/images/twitter.png">
    </div>
  </div>
  <!-- Copyright -->
  <div class="footerCopyright">© 2022 Copyright:
    <a href="/"> NAME</a>
  </div>
</div>

CSS

.footer{
  background-color: white;
  padding-top:20px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 5px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footerHeader{
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  width: 100%;
}

.socialMedia{
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: space-evenly;
  float: right;
}

.icon{
  margin-right: 10px;
  margin-left: 10px;
  width: 64px;
  height: 64px;
  transition: transform .2s;
}


.footerCopyright{
  margin: 10px;
}

页脚的媒体查询：

.footer{
  min-height: 50vh;
  justify-content: space-between;
}

.footerHeader{
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0px;
  height: 25vh;
}

.socialMedia{
  flex-direction: column;
}

.icon{
  margin: 0 auto;
  margin-bottom: 20px;
}

Answer 1

这是最低限度的工作演示代码，您可以在其中进行更改并使用它。

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

.social-media {
    display: flex;
    flex-flow: row;
}

.social-media img {
  margin-left: 10px;
}
.footerCopyright {
  margin-top: 10px;
}

@media screen and (max-width: 480px) {
   .social-media {
      flex-flow: column;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .social-media img {
      margin-left: 0;
      margin-top: 10px;
    }
    .top {
        display: block;
    }
}

<div class="footer">
  <div class="top">
  <a href="">Button</a>
  <div class="social-media">
    <img alt="Facebook" class="icon zoom" src="/images/facebook.png">
    <img alt="Instagram" class="icon zoom" src="/images/instagram.png">
    <img alt="Twitter" class="icon zoom" src="/images/twitter.png"> 
  </div>    
  </div>
  <div class="footerCopyright">© 2022 Copyright:
    <a href="/"> NAME</a>
  </div>
</div>

在方向列中重叠的 Flex 框

Flex boxs overlapping in direction column

html

css

flexbox