Question

我正在使用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>

Answer 1

改为使用justify-content: space-evenly;怎么样？即使将子元素包裹到下一行，它也将确保子元素仍然居中。

Answer 2

我认为您可能需要考虑为弹性框子项设置flex规则。我不确定我是否理解您到底要达到什么目标，但是如果您遵循此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;*/
}`

当然，您可以在此Complete Guide to Flexbox

中找到所有答案

Itamar

Flexbox内容无法通过链接和图像均匀分布

2 个答案: