在我的页脚中，当我的屏幕宽度小于 700 像素时，如何将社交图标分成 2 行？

Posted 2023-03-05

【中文标题】在我的页脚中，当我的屏幕宽度小于 700 像素时，如何将社交图标分成 2 行？

【英文标题】：In my footer how do I split in 2 rows the social icons when my screen width is less than 700 px?

【发布时间】：2019-12-04 05:43:48

【问题描述】：

我的页脚中有 6 个社交网站图标，我使用 flexbox 将所有图标放在同一行。 当我的屏幕达到 700 像素（媒体查询）时，我希望它们更改并分成 2 行（3 行和 3 行）

html：

<footer id="footer">
<div class="footer-socials">
<ul>
<li><a href="#"><i class="fab fa-youtube-square"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-vk"></i></a></li>
<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>

CSS：

footer
  width: 100%;
  display: flex;
  flex-direction: column;


.footer-socials
  background-color: #196b19;
  width: 100%;
  

.fa-youtube-square, .fa-facebook-square, .fa-instagram, .fa-vk, .fa- 
twitter-square, .fa-linkedin 
  color: #fff;
  font-size: 1.3rem;


ul, li
  list-style: none;
  justify-content: center;
  display: flex;
  padding: 0.5rem;

请注意：我将值“flex-direction: column”赋予我的 ID 页脚，因为我有一个多级页脚，另一个页脚是“合法”页脚。 谢谢！

【参考方案1】：

添加：

display: flex;
flex-wrap: wrap;

在您的图标 div 中。

【讨论】：

如果你想确保 3 顶部和 3 底部，这样做你还可以为该 div 添加一个最大宽度。