当视口宽度不足以使它们水平显示时，如何使元素堆叠在一起？

Question

viewport small 我做了一个网站，底部有 6 个图标，每行 3 个。当我调整 window 的大小时，它变得像 phone 的宽度，它变得有点奇怪，一些图标消失了。附上截图。

a img{
    border-radius: 50%;
}

a {
    padding: 5%;
}

#channels {
    display: flex;
    justify-content: center;
}



figcaption {
    font-size: larger;
}

#contact {
    display: flex;
    justify-content: center;
}

<div id="channels">
    <a href="https://www.youtube.com/channel/UCVYe9OwcrGrlRmlX8cSWgvg"><img src="images/ferglogo.jpg" alt=""><figcaption>iFerg</figcaption></a>
    
    <a href="https://www.youtube.com/channel/UCMY-hT12uNV9cC9Pn_DNk_w"><img src="images/fergplays.jpg" alt=""><figcaption>iFerg - Plays </figcaption></a>
    
    <a href="https://www.youtube.com/channel/UCjXc-3r4Mh9K9qdm5e04U9Q"><img src="images/ferglive.jpg" alt=""><figcaption>iFerg - Live</figcaption></a>

    <a href="https://www.youtube.com/channel/UC7WFPLWZdZHGI5BQ8PGsxuw"><img src="images/fergclips.jpg" alt=""><figcaption>iFerg - Clips</figcaption></a>
    
    </div>

    <hr>

    <h2>Contact</h2>
    <div id="contact">
    <a href="https://twitter.com/ferg"><img src="images/twitter.jpg" alt=""><figcaption>Twitter</figcaption></a>
    <a href="https://www.instagram.com/ifergyt/"><img src="images/instagram.jpg" alt=""><figcaption>Instagram</figcaption></a>
    <a href="https://www.facebook.com/IFerg-2022941574421321"><img src="images/facebook.jpg" alt=""><figcaption>Facebook</figcaption></a>
    <a href="https://discord.gg/FergFam"><img src="images/discord.jpg" alt=""><figcaption>Discord</figcaption></a>

    </div>

Answer 1

（感谢@vio）使用 flex-wrap: wrap; 属性

当视口宽度不足以使它们水平显示时，如何使元素堆叠在一起？

how can i make elements stack above each other when the viewport width is not enough to make them display horizontally?

html

css

viewport