时间戳

首页 > 解决方案 > Flexbox 内容没有与链接和图像均匀分布

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

问题描述

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

页脚

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>

标签： htmlcssflexboxalignment

解决方案

我认为您可能需要考虑flex为 flex-box 子项设置规则。我不确定我理解你到底想达到什么目标，但如果你遵循这条flex规则，你可以取得很多成就。

.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-around; /*you can play with it*/
    align-items: center;
    padding: 0 15px 0; /*fixed space on left and right of the flex-box*/
}
.site-wide-footer > { /*flex-box children */
    flex: 1 0; /*play with this one a bit. you could also give it a minimum width like that:  flex: 1 0 100px;*/
}`

当然，您可以在此Flexbox 完整指南中找到所有答案

伊塔马尔

推荐阅读