时间戳

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

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

问题描述

我的页脚中有 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 页脚，因为我有一个多级页脚，另一个页脚是“合法”页脚。谢谢！

标签： htmlcssflexboxmedia-queriesfont-awesome

解决方案

添加：

display: flex;
flex-wrap: wrap;

在您的图标 div 中。

推荐阅读