Flexbox 内容没有与链接和图像均匀分布答案

【问题标题】：Flexbox content not spreading evenly with links and imagesFlexbox 内容没有与链接和图像均匀分布
【发布时间】：2019-04-04 03:43:06
【问题描述】：

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

【问题讨论】：

标签： html css flexbox alignment

【解决方案1】：

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

【讨论】：

空间均匀使内容事件更紧密地结合在一起。当我使用 firefox 开发工具查看它时，它显示两个图像链接填满了右侧的整个空间。我尝试给它们 0 的边距，甚至 0 的边距，以尝试删除空间，但没有效果。
这似乎是由两个图像周围的
和
标签引起的。

【解决方案2】：

我认为您可能需要考虑为 flex-box 子项设置 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 上找到所有答案

伊塔马尔

【讨论】：