html - Flexbox 内容没有通过链接和图像均匀分布

Question

我正在使用 flex 构建页脚。我希望页脚占网站宽度的 60% 并居中，这样效果很好。当我将内容添加到文本、链接和图像链接的页脚并尝试对齐空间时，它无法正常工作并且页脚右侧有很多额外的空白区域。如何删除它？

Footer

CSS

    .site-wide-footer {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    height: auto;
    border: 2px solid black;
    border-radius: 24px;
    color: white;
    background-color: black;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}

HTML

<footer>
 <div class="site-wide-footer">
   <p>&copy; 2018 copyright</p>
   <p><a href="store.html" class="button-footer"> &diams;STORE</a></p>
   <p><a href="about-us.html" class="button-footer">&diams;ABOUT US</a></p>
   <p><a href="sitemap.xml" class="button-footer">&diams;SITEMAP</a></p>
  <div class="social-footer">
   <p><a href="discord url">
   <img src="images/Discord-Logo-White.png" alt="Discord Logo" 
   class="discord-footer" onmouseover="hover(this);" 
   onmouseout="unhover(this);"></a>
   <a href="facebook url/"><img 
   src="images/facebook-icon.png" alt="Facebook Icon" class="facebook- 
   footer"></a></p>
  </div>  
 </div>
</footer>

Answer 1

使用 justify-content: space-evenly; 怎么样？它还将确保子元素仍然居中，即使它被换行到下一行也是如此。