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

Question

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

Answer 1

添加:

display: flex;
flex-wrap: wrap;

在你的图标部分。